Angular Material — это популярная библиотека компонентов пользовательского интерфейса для приложений Angular. Одним из его полезных компонентов является автозаполнение чипов, которое позволяет пользователям выбирать несколько вариантов из предопределенного набора. В этой статье мы рассмотрим различные методы реализации автозаполнения Angular Material Chips на примерах кода.

Метод 1: базовая реализация
Для начала давайте создадим базовый проект Angular с установленным Angular Material. Импортируйте необходимые модули и компоненты:

// app.module.ts
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material/chips';
@NgModule({
  imports: [
    // other imports
    MatAutocompleteModule,
    MatChipsModule
  ],
})
export class AppModule { }

Далее создайте компонент и определите параметры автозаполнения:

// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
  selectedOptions: string[] = [];
}

Наконец, используйте директивы mat-chipsи mat-autocompleteв шаблоне:

<!-- app.component.html -->
<mat-chip-list>
  <mat-chip *ngFor="let option of selectedOptions" (removed)="removeOption(option)">
    {{ option }}
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
  <input type="text" placeholder="Select an option" [matAutocomplete]="auto" (matChipInputTokenEnd)="addOption($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" (onSelectionChange)="selectOption(option)">
    {{ option }}
  </mat-option>
</mat-autocomplete>

Метод 2: параметры фильтрации
В этом методе мы добавим фильтр к параметрам автозаполнения на основе пользовательского ввода. Измените компонент следующим образом:

// app.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { startWith, map } from 'rxjs/operators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
  selectedOptions: string[] = [];
  filteredOptions: Observable<string[]>;
  optionControl = new FormControl();
  constructor() {
    this.filteredOptions = this.optionControl.valueChanges.pipe(
      startWith(''),
      map(value => this.filterOptions(value))
    );
  }
  filterOptions(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
  addOption(event: MatChipInputEvent) {
    const input = event.input;
    const value = event.value;
    // Add option
    if ((value || '').trim()) {
      this.selectedOptions.push(value.trim());
    }
// Reset input value
    if (input) {
      input.value = '';
    }
    this.optionControl.setValue(null);
  }
}

Метод 3: собственный шаблон чипа
Вы можете настроить внешний вид чипов с помощью директивы matChipInputForAngular Material. Измените шаблон следующим образом:

<!-- app.component.html -->
<mat-chip-list>
  <mat-chip *ngFor="let option of selectedOptions" (removed)="removeOption(option)">
    {{ option }}
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
  <input type="text" placeholder="Select an option" [formControl]="optionControl" [matAutocomplete]="auto" (matChipInputTokenEnd)="addOption($event)">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-chip-list>

В этой статье мы рассмотрели различные методы реализации автозаполнения Angular Material Chips. Мы начали с базовой реализации, а затем обсудили варианты фильтрации на основе пользовательского ввода. Наконец, мы научились настраивать шаблон чипа. Используя эти методы, вы можете создать мощные и удобные функции автозаполнения в своих приложениях Angular.

Узнайте, как реализовать автозаполнение Angular Material Chips различными методами, в этом подробном руководстве. Мы предоставим примеры кода и пошаговые инструкции, которые помогут вам создать мощные возможности автодополнения в ваших приложениях Angular.

Метод 1: базовая реализация
Начните с настройки проекта Angular с установленным Angular Material. Импортируйте необходимые модули и компоненты и создайте базовый шаблон с помощью директив mat-chips и mat-autocomplete.

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

Метод 3: собственный шаблон чипа
Настройте внешний вид чипов, используя директиву matChipInputFor Angular Material. Мы поможем вам создать собственный шаблон чипа, соответствующий дизайну и требованиям вашего приложения.

Автозаполнение Angular Material Chips — это универсальный компонент, который позволяет пользователям эффективно выбирать несколько вариантов. Следуя методам, изложенным в этом руководстве, вы сможете легко реализовать эту функцию в своих приложениях Angular. Улучшите взаимодействие с пользователем, повысьте производительность и создавайте визуально привлекательные интерфейсы автозаполнения с помощью автозаполнения Angular Material Chips.