過濾器在角度材料表中不起作用

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。 默認情況下，過濾器字符串的空白被修剪並且匹配不區分大小寫。 對於過濾器匹配的自定義實現，可能會被覆蓋。