在每列下为 mat-table 添加过滤器

Question

我从另一个看到了一个 Stackblitz，想看看我是否可以为每一列添加一个过滤器到父级 table。

Here's my Stackblitz that I tried and this was the closest I could get（请忽略CSS/styling）。我在列下打了一个输入过滤器。（请注意，我还没有在 .ts 文件中实现实际工作的过滤器本身）不过我注意到一些有趣的事情，用于对列本身进行排序的按钮不仅被 header/column 名称包裹，而且过滤器本身 -- 因此当用户单击过滤器以关注该字段时，他们也会触发排序。

我尝试在 th/header 标签下方添加整个 mat-form-field 块，但它甚至无法工作或显示。我在这里不知所措，似乎无法弄清楚如何在不将过滤器包裹在排序按钮的情况下将其放置在下方。

Answer 1

如果你想防止在点击输入框时点击排序按钮，你可以尝试在输入框添加(click)="$event.stopPropagation();"。您也可能需要将其添加到 (mouseup) 或 (mousedown) 事件而不是 (click) 事件。

Answer 2

不要在第 th 中使用标签 mat-sort-header，而是在第 th 中使用专用跨度。

<span mat-sort-header></span>

例如，您可以在 stackblitz 示例中将 could 写为

 <ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
     <th mat-header-cell *matHeaderCellDef> 
          <span mat-sort-header>{{innerColumn}}</span>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
     </th>
     <td mat-cell *matCellDef="let element"> {{element[innerColumn]}} </td>
 </ng-container>

这样排序只会在列名上发生，当你点击输入时，只会调用输入的 keyup 函数，点击输入文本字段不会发生排序。

在每列下为 mat-table 添加过滤器

Adding a filter under each column for mat-table

angular-material

angular

mat-table