Фильтрация таблицы данных углового материала по mat-select

Question

У меня есть коврик с сортировкой, фильтрацией и разбиением на страницы. Теперь я ищу способ фильтрации matTableDataSource с помощью mat-select. Это мой код Stackblitz Может кто-нибудь помочь мне с этим?

Answer 1

Вы можете использовать ту же функцию, которая будет включать (click) Событие Mat-Option также похоже на:

И в вашем общем примере вы использовали [value]="version.value" но это должно быть [value]="version" вместо этого, потому что у него нет свойства с именем value

<mat-form-field>
     <mat-select placeholder="Version">
      <mat-option *ngFor="let version of versions" [value]="version" (click)="applyFilter(version)">
              {{version}}
       </mat-option>
     </mat-select>
</mat-form-field>

Stackblitz

Answer 2

Просто используйте (selectionChange)@Output свойство и передать ему значение выбранного mat-option на ваше mat-select, Это то, что вы можете получить $event.value:

<div class="col-sm-4 col-md-4">
  <mat-form-field>
    <mat-select 
      placeholder="Version" 
      (selectionChange)="applyFilter($event.value)">
      <mat-option 
        *ngFor="let version of versions" 
        [value]="version">
        {{version}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

---

Вот рабочий образец StackBlitz для вашей ссылки.