如何使用 Mat Table 按 space 分隔的多个关键字进行搜索

Question

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

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

如您所见，输入搜索关键字后，trim 就像 'Helium Li' 的 'heliumLi'。如果我想根据每个单词查找怎么办？像 'Helium' 或 'Li'。如果列值具有 'Helium' 或 'Li'，我必须 foreach 并显示结果。我该如何实现？

Answer 1

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

@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 按 space 分隔的多个关键字进行搜索

how to search by multiple keywords separated by space using Mat Table

material-design

angular-material

mat-table

angular8