Angular Material Table filterPredicate 过滤对象

Question

我有一个带有文本输入的垫表来过滤它的结果。

数据源是:

[
    {
        "articolo": {
            "code": "22.398.14",
            "url": "/url1"
        },
        "color": "white",
        "weight": "10"
    },
    {
        "articolo": {
            "code": "22.398.15",
            "url": "/url2"
        },
        "color": "red",
        "weight": "20"
    }
]

我在html中添加了这个:

    <mat-form-field>
    <mat-label>Filtra</mat-label>
    <input matInput (focus)="setupFilter('articolo')" (keyup)="applyFilter($event)" placeholder="Filter">
    </mat-form-field>

在 ts 中:

setupFilter(column: string) {
    this.data.filterPredicate = (data, filter) => {
      data[column].code.indexOf(filter) != -1;
    }
  }

applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.data.filter = filterValue.trim().toLowerCase();
  }

但什么也没有发生

如果我在 filterPredicate 中添加一个 console.log 它不会触发:

this.data.filterPredicate = (data, filter) => {
      console.log(data);
...

怎么了？

谢谢

Answer 1

如果您需要为您的“代码”属性创建自己的过滤行为，请在构造函数或 ngOnInit 钩子(Hook)中创建它，就像这样:

ngOnInit() {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.filterPredicate = (data, filter) => {
      return data.articolo.code.indexOf(filter) != -1;
    }
  }

注意 filterPredicate 中的 return 语句。你没用过!
此外，您不需要这个 (focus)="setupFilter('articolo')"。
你所要做的只是调用applyFilter，就像这样:

applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
    console.log(this.dataSource.filteredData);
  }

然后您可以在更改输入值期间在控制台中查看过滤后的数据。
希望，我帮助了你。我不明白为什么你的数据是嵌套的。好主意是首先转换这些数据，然后应用过滤器。可能在你的情况下它很好。