angular - 如何在 Material 表中添加过滤行？

Question

我正在使用 Angular Material 表并尝试使用过滤器选项。在文档中我找到过滤器 example但就我而言，我需要在每个标题后添加 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 的源代码来看，您没有可扩展点来“注入(inject)”过滤器行。

但是，你可以做的是:

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>

然后向您的 Controller 添加一个新的列名列表:

  // 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，你就离开了: