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

Question

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

Answer 1

Просто используйте свойство (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 для вашей ссылки.

Answer 2

Вы можете использовать ту же функцию, которая будет запускать событие (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