如何在材料表中添加过滤行？

Question

我正在使用角度材料表，并尝试使用过滤器选项。在文档中，我找到了过滤器示例，但对于我的情况，我需要在每个标题后添加 textInputs。我该怎么做 ？我的例子

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Id Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID</th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> 

我需要这样的桌子。

Answer 1

我为此苦苦挣扎了一段时间，我是这样解决的：

您不能使用页脚，除非您愿意将过滤器输入放在表格底部。

从查看 mat-table 的源代码来看，没有可扩展点供您“注入”过滤器行。

但是，你可以做的是：

1. 为每列添加一个额外的“matColumnDef”，它将保存过滤器输入字段：

// Original column
<ng-container matColumnDef="id">
   <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Id</th>
   <td mat-cell *matCellDef="let row">{{ row.id }}</td>
</ng-container>

// Additional 'filter' column
<ng-container matColumnDef="id-filter">
   <th mat-header-cell *matHeaderCellDef>
      <input type="number" (change)="filterchanged($event.target.value, 'id')" />
   </th>
</ng-container>

然后将新的列名称列表添加到控制器中：

  // Original column list
  displayedColumns: string[] = [
    'id'
  ];

  // Additional 'filter' column list
  displayedColumnFilters: string[] = [
    'id-filter'
  ];

在表中：使用新列表“displayedColumnFilters”指定附加标题列：

<tr mat-header-row *matHeaderRowDef="displayedColumnFilters"></tr>

  ...

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-header-row *matHeaderRowDef="displayedColumnFilters"></tr>

  <tr
    mat-row
    class="clickable"
    *matRowDef="let deal; columns: displayedColumns"
    (click)="dealClick(deal)"
  ></tr>

 </table>

这将在您的输入字段中添加一个新行：

只需一点 CSS 就可以了：

Answer 2

我认为这对您来说是完美的案例。检查下面的例子：

https://stackblitz.com/edit/angular-hbakxo-5jeaic