具有过滤角材料的复杂类型表答案

【问题标题】：complex types table with filtering angular material具有过滤角材料的复杂类型表
【发布时间】：2019-03-14 14:35:17
【问题描述】：

我想使用从 Angular Material 过滤的表格，但我无法过滤复杂类型（Branch.category）。实际过滤器仅适用于 subjectName。

TS：

   export class Subject {
  id: Number = null;
  subjectName: String = '';
  branch: Branch = new Branch;
}

export class Branch {
  category: String = '';
}



displayedColumns: string[] = ['id', 'subjectName', 'category'];
dataSource;
subjects: Subject[];

constructor() {

this.subjects = [];
this.subjects.push({id:1, subjectName: 'Biology', branch: {category: 'science'}});
this.subjects.push({id:2, subjectName: 'physics', branch: {category: 'science'}});
this.subjects.push({id:3, subjectName: 'english', branch: {category: 'humanities'}});

this.dataSource = new MatTableDataSource(this.subjects);
}

applyFilter(filterValue: string) {
  console.log(filterValue);
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

HTML：

<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>

我想制作两个单独的过滤器：subjectName 和 category。

【问题讨论】：

这回答了您的问题吗？如果您需要其他任何东西，请现在告诉我们:-)

标签： html angular typescript angular-material angular5

【解决方案1】：

欢迎使用 StackOverflow，我想您可能想为您的数据表做一个自定义过滤器，您可以通过覆盖数据源的 filterPredicate 属性来做到这一点，如下所示：

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

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

编辑：找到这个Github issue，我认为它对你有用。

【讨论】：