Question

我正在尝试在我的mat-table中实现Filter。

根据文档

{id: 123, name: 'Mr. Smith', favoriteColor: 'blue'}

减少为

 123mr. smithblue

但是我有一个带有嵌套值的对象。例如

{ 
  data: 
    rules:
      name: 'john',
      address: '123 road',
  id: 'id1',
  type: 'normal'
}

过滤器适用于id和type值，但不适用于name和address之类的嵌套值。

html

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

component

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

有人可以让我知道如何使它工作。

谢谢

Answer 1

根据文档，可以指定自定义filterPredicate（https://material.angular.io/components/table/overview#filtering）

例如，数据对象{id：123，名称：“ Mr。 Smith'，favoriteColor：“ blue”}将减少到123mr。史密斯蓝。如果您的过滤器字符串为蓝色，则将其视为匹配项，因为它包含在精简字符串中，并且该行将显示在表格中。

要覆盖默认的过滤行为，可以设置一个自定义filterPredicate函数，该函数接受数据对象和过滤器字符串，如果该数据对象被视为匹配项，则返回true。

因此，在您的this.dataSource上，您可以指定一个自定义方法，该方法将返回一个布尔值，无论给定结果是否匹配

方法（https://material.angular.io/components/table/api#additional_classes）：

filterPredicate：（（数据：T，过滤器：字符串）=>布尔值）

检查数据对象是否与数据源的过滤器字符串匹配。默认情况下，每个数据对象都将转换为其属性的字符串，如果过滤器在该字符串中至少出现一个，则返回true。默认情况下，过滤器字符串的空白会被修剪，并且匹配项不区分大小写。对于过滤器匹配的自定义实现，可能会被覆盖。

过滤器在角材料表中不起作用

1 个答案: