angular - 通过 mat-select 过滤角材料数据表

Question

我有一个带有排序、过滤和分页功能的垫子表。现在，我正在寻找一种使用 mat-select 过滤 matTableDataSource 的方法。这是我的代码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。