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

Question

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

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

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

Answer 1

Если вы посмотрите на автозаполнение углового материала примеры , особенно то, что называется Автозаполнение фильтра , вы увидите, как выполняется фильтрация, и вы можете легко расширить его для фильтрации несколькихзначения.

Из примера (имейте в виду, что массив 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);
}

Здесь - это стек, показывающий фильтрацию, упомянутую выше.