Question

我有一个带有排序，过滤器和分页功能的垫子桌子。现在，我正在寻找一种使用mat-select过滤matTableDataSource的方法。这是我的代码Stackblitz 有人可以帮我吗？

Answer 1

您可以使用将在Mat-Option的(click)事件上触发的相同函数，例如：

在您的共享示例中，您使用了[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>

这是您推荐的Working Sample StackBlitz。

通过垫选择

2 个答案: