Html 带过滤角材质的复杂类型表格

我想使用表格过滤角度材质，但我不能过滤复杂类型（Branch.category）。仅对subjectName起作用的实际筛选器

TS:

HTML:

身份证件
{{element.id}
主题名
{{element.subjectName}
类别
{{element.branch.category}

---

我想创建两个单独的筛选器：subjectName和category。

欢迎使用StackOverflow，我认为您可能需要为数据表执行自定义筛选器，您可以通过覆盖数据源的

filterPredicate

属性来完成此操作，如下所示：

this.dataSource.filterPredicate = (data, filter) => {
  const customField = data.branch.category;
  return customField === filter; 
}

这对您来说只是一个小例子，您可能需要进行一些修复才能工作。只要让我知道它是如何适合的，我们就可以做它。您可以阅读文档了解更多信息

---

编辑：找到了这个，我想它会对你有用。

这回答了你的问题吗？如果您还需要什么，请现在告诉我们：-）

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="search">
</mat-form-field>

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

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

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

  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef> category </th>
    <td mat-cell *matCellDef="let element"> {{element.branch.category}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;" 
    [ngClass]="{'highlight': selectedRowIndex == element.id}"
    (click)="highlight(element)"></tr>

</table>

this.dataSource.filterPredicate = (data, filter) => {
  const customField = data.branch.category;
  return customField === filter; 
}