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

Question

我正在尝试在我的垫表中实现过滤器。

根据文档，

{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, name: 'Mr. Smith', favoriteColor: 'blue'} 将减少到 123mr。 史密斯蓝。 如果您的过滤器字符串为蓝色，那么它将被视为匹配项，因为它包含在缩减字符串中，并且该行将显示在表中。

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

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

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

filterPredicate: ((data: T, filter: string) => boolean)

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