В этом сообщении блога мы погрузимся в мир функций множественного выбора и поиска в Angular 13. Мы рассмотрим различные методы реализации этих функций в ваших приложениях Angular, используя разговорный язык и попутно предоставляя примеры кода. К концу этой статьи вы получите четкое представление о различных подходах и сможете использовать их в своих проектах.
Методы множественного выбора и поиска в Angular 13:
- Использование Angular Material:
Angular Material предоставляет мощный набор компонентов пользовательского интерфейса, включая компонент MatSelect, который сразу же поддерживает функциональность множественного выбора. Вы можете улучшить это с помощью фильтра поиска, объединив его с компонентом MatInput и отфильтровав параметры на основе ввода пользователя.
<mat-form-field>
<mat-label>Select Items</mat-label>
<mat-select [formControl]="selectedItems" multiple>
<mat-option *ngFor="let item of items | filter: searchText" [value]="item">
{{ item.name }}
</mat-option>
</mat-select>
</mat-form-field>- Пользовательский компонент с множественным выбором:
Если вы предпочитаете более индивидуальное решение, вы можете создать свой собственный компонент с множественным выбором, используя реактивные формы Angular. Реализуйте настраиваемый раскрывающийся список с флажками и добавьте поле ввода для поиска для динамической фильтрации параметров.
<custom-multi-select [options]="items" formControlName="selectedItems"></custom-multi-select>- Библиотека ngx-chips:
ngx-chips — это библиотека Angular, которая предоставляет множество компонентов пользовательского интерфейса для сценариев с множественным выбором. Он предлагает универсальный компонент TagInput, который поддерживает функции поиска. Вы можете использовать его для реализации раскрывающегося списка с множественным выбором и поисковым вводом.
<tag-input [(ngModel)]="selectedItems">
<tag-input-dropdown [autocompleteItems]="filteredItems"></tag-input-dropdown>
</tag-input>- Фильтрация с помощью канала:
Вы можете создать собственный канал Angular для фильтрации параметров на основе пользовательского ввода. Объедините это с обычным компонентом выбора, чтобы получить функциональность множественного выбора.
<select multiple>
<option *ngFor="let item of items | filter: searchText" [value]="item">
{{ item.name }}
</option>
</select>- Реактивные формы с настраиваемым фильтром.
Используя реактивные формы Angular, вы можете создать компонент с множественным выбором и поисковым фильтром. Подпишитесь на изменение значений входных данных поиска и соответствующим образом фильтруйте параметры.
<input type="text" [formControl]="searchControl">
<ng-container formArrayName="selectedItems">
<div *ngFor="let item of filteredOptions; let i = index">
<input type="checkbox" [value]="item" [formControlName]="i">{{ item.name }}
</div>
</ng-container>В этой статье мы рассмотрели несколько методов реализации функций множественного выбора и поиска в Angular 13. Независимо от того, решите ли вы использовать Angular Material, создавать собственные компоненты или использовать сторонние библиотеки, такие как ngx-chips, у вас есть выбор. вариантов, соответствующих потребностям вашего проекта. Комбинируя эти подходы с примерами кода, вы можете легко реализовать эти функции в своих приложениях Angular и улучшить взаимодействие с пользователем.