Question

我是angular的新手，并且具有mat-autocomplete作为搜索字段并且我希望每个mat-option都可以使用2个值进行搜索，例如使用名称和ID：

options = [{name: 'x', id: 123},{name: 'y', id:142}]

任何人都知道我该怎么做吗？

Answer 1

如果您查看Angular Material自动完成examples，特别是名为 Filter autocomplete 的用户，将会看到过滤的完成方式，并且可以轻松地扩展它以过滤多个值

在示例中（请记住，options数组只是一个字符串数组，因此没有属性可以访问/过滤）：

private _filter(value: string): string[] {
  const filterValue = value.toLowerCase();
  return this.options.filter(option => option.toLowerCase().includes(filterValue));
}

我们可以将其重写为以下内容，以过滤其他id属性（假设options是具有属性name和id的对象数组）：

private _filter(value: string): Option[] {
  const filterValue = value.toLowerCase();
  return this.options.filter(option => String(option.id).toLowerCase().indexOf(filterValue ) > -1 || 
  option.name.toLowerCase().indexOf(filterValue ) > -1);
}

Here 是显示上述过滤条件的堆叠式闪电战。

具有两个可搜索值的Angular Material autocomplete的mat-option

1 个答案: