Question

我找到了一个应用简单过滤器的示例。您可以在下面找到链接。

https://stackblitz.com/edit/angular-mat-table-inline-editing?file=app%2Ftable-editing-example.ts

正如您所看到的代码，一旦您放置了搜索关键字，请将其像“ heliumLi”一样修饰为“ Helium Li”。如果我想根据每个单词查找该怎么办？例如“氦气”或“锂”。我必须foreach并显示结果，如果列值具有“ Helium”或“ Li”。我该如何实现？

Answer 1

您可以通过定义自定义filterPredicate函数（请参见https://material.angular.io/components/table/overview#filtering）来覆盖默认过滤行为。对于您的示例，请尝试以下类似操作，以匹配以空格分隔的确切符号或部分名称（均不区分大小写）：

@Component({
  selector: 'table-editing-example',
  styleUrls: ['table-editing-example.css'],
  templateUrl: 'table-editing-example.html',
})
export class TableEditingExample {
  displayedColumns = ['position', 'name', 'weight', 'symbol', 'fav'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  ngOnInit() {
    this.dataSource.filterPredicate = this.filterObject;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  filterObject(obj, filter): boolean {
    return filter.split(' ').some(
      item => obj.name.toLowerCase().indexOf(item) >= 0 || obj.symbol.toLowerCase() == item
    );
  }
}

如何使用Mat Table

1 个答案: