如何编辑角度材料filter谓词正确？

Question

由于我在互联网上找不到很多说明如何以正确的方式覆盖filterPredicate的示例，因此我决定在此询问。如您在照片中所见，我有一张桌子，上面满是状态不同的电话号码。

过滤有效，但是有一个我不知道如何解决的小错误。当我过滤“ ASSIGNED”时，将显示“ UNASSIGNED”和“ ASSIGNED”的结果。 “ UNASSIGNED”，因为其中包含“ ASSIGNED”。

所以我发现我需要覆盖filterPredicate。我试了几次，但不太了解其中的语法。你能帮我我需要做什么吗？

多数民众赞成在html（仅必要的部分）：

<table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="telefonnummer">
      <th mat-header-cell *matHeaderCellDef> Telefonnummer </th>
      <td mat-cell *matCellDef="let element"> {{element.areaCode.prefix}}-{{element.areaCode.base}}- 
   {{element.extension}} </td>
    </ng-container>

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

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

那是我的ts类（仅必要的部分）：

displayedColumns: string[] = ['telefonnummer', 'status'];

products = [];

dataSource = new MatTableDataSource<any>(this.products);

constructor(private httpClient: HttpClient) {
    this.getAllNumbers();
}

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

ngOnInit() {
    this.dataSource.paginator = this.paginator;

    this.dataSource.filterPredicate = (data: any, filter: string) => {
      let matchFound = false;
      if (data === filter) {
          matchFound = true;
      }
  return matchFound;
};
}

感谢您的帮助！

Answer 1

在这种情况下，按字符串assigned和unassigned进行过滤是错误的。如果您的表将获得更多的列，并且用户将能够设置 assigned 或 unssigned 的值，则您的敏感过滤将变得很麻烦。

但是，如果那不是一个问题（表有两列，而一列仅用于数字），则可以通过以下方法进行过滤（尽管我看不到您的DataSource，但我根据列定义假设{{1} }是要检查的右键）：

status

简单的代码段，因此可以清楚地了解会发生什么。

p.s。如果this.dataSource.filterPredicate = (data, filter): boolean => { const transformedFilter = filter.trim().toLowerCase(); if (data.status.trim().toLowerCase() === transformedFilter) { return true; } else if (data.telefonnummer.trim().toLowerCase() === transformedFilter) { return true; }; return false; } 是数字而不是字符串，则telefonnummer.trim()可能会出错。 telefonnummer也值得检查其值是否为伪造