Я новичок в angular, и у меня есть матовое автозаполнение в качестве поля поиска. и я хочу, чтобы каждый из моих вариантов мата был доступен для поиска с двумя значениями, например, с именем и с идентификатором:
options = [{name: 'x', id: 123},{name: 'y', id:142}]
любое тело знает, как я могу это сделать?
🤔 А знаете ли вы, что...
Angular позволяет создавать кастомные директивы для расширения функциональности HTML.
Если вы посмотрите на 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.