在 mat-table 的每列下添加一个过滤器答案

【问题标题】：Adding a filter under each column for mat-table在 mat-table 的每列下添加一个过滤器
【发布时间】：2021-03-26 10:10:15
【问题描述】：

我遇到了另一个 StackOverflow Answer 的 Stackblitz，想看看是否可以为每一列的父表添加一个过滤器。

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

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

【问题讨论】：

标签： angular angular-material mat-table

【解决方案1】：

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

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

例如，你可以在你的 stackblitz 例子中写成：

 <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函数，在输入文本框点击时不会排序。

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢——切换到 Angular 后我忘记了阻止默认事件。