Опция автозаполнения Angular Material с двумя доступными для поиска значениями

Я новичок в angular, и у меня есть матовое автозаполнение в качестве поля поиска. и я хочу, чтобы каждый из моих вариантов мата был доступен для поиска с двумя значениями, например, с именем и с идентификатором:

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

любое тело знает, как я могу это сделать?

🤔 А знаете ли вы, что...
Angular позволяет создавать кастомные директивы для расширения функциональности HTML.


1 128
1

Ответ:

Решено

Если вы посмотрите на Angular Material 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 is a stackblitz showing the filtering mentioned above.