Angular material Chips Autocomplete

本文主要是介绍Angular material Chips Autocomplete，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Chips Autocomplete 官网的例子我没法正常使用，无法实现搜索

我的select是个通用组件，现在贴代码：
component.ts
 

import {Component,ElementRef,forwardRef,Input,OnChanges,OnDestroy,OnInit,SimpleChanges,ViewChild,
} from '@angular/core';
import { Tag } from '../../models/tag/tag';
import { map, startWith, takeUntil } from 'rxjs/operators';
import { ControlValueAccessor, UntypedFormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
// import { MatChipInputEvent } from '@angular/material/chips';
import { TagService } from '../../services/tag/tag.service';
import { TagType } from '../../enums/TagType';
import { ISearchOptions } from '../../interfaces/SearchOptions';
import { SubscriberWrapperComponent } from '../subscriber-wrapper/subscriber-wrapper.component';@Component({selector: 'app-tags-select',templateUrl: './tags-select.component.html',styleUrls: ['./tags-select.component.scss'],providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => TagsSelectComponent),multi: true,},],
})
export class TagsSelectComponentextends SubscriberWrapperComponentimplements ControlValueAccessor, OnChanges, OnInit, OnDestroy
{@Input() title: string;@Input() disabled: boolean;@Input() color: 'primary' | 'accent' | 'warn';@Input() type: TagType;@Input() tags: Tag[];filteredTags: Tag[];selectedTags: Tag[] = [];separatorKeysCodes: number[] = [ENTER, COMMA];tagCtrl = new UntypedFormControl('');hideComponent: boolean;@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;@ViewChild('chipList') chipList: ElementRef;constructor(private tagService: TagService) {super();}onChange = (_: any) => {};onTouched = () => {};async ngOnInit() {this.initTags();const conditions = [];if (this.type) {conditions.push({key: 'type',value: this.type,operator: '=',});}this.tags = await this.listTags('', {conditions,});await this.updateFilterTags();}async listTags(query: string = '', options: ISearchOptions = {}) {if (!this.tags) {const response = await this.tagService.list(query, options);return response.entities;} else {return this.tags;}}// add(event: MatChipInputEvent): void {//   event.chipInput!.clear();//   this.tagCtrl.setValue(null);// }remove(tag: Tag): void {const index = this.selectedTags.indexOf(tag);if (index >= 0) {this.selectedTags.splice(index, 1);}this.filteredTags.push(tag);// this.onChange(this.selectedTags);  }selected(event: MatAutocompleteSelectedEvent): void {this.selectedTags.push(event.option.value);this.tagInput.nativeElement.value = '';this.tagCtrl.setValue(null);// this.onChange(this.selectedTags);}registerOnChange(fn: any): void {this.onChange = fn;}registerOnTouched(fn: any): void {this.onTouched = fn;}writeValue(selectedTags: Tag[] = []): void {this.selectedTags = selectedTags ?? [];this.updateFilterTags();}ngOnChanges(changes: SimpleChanges): void {if (changes.disabled?.currentValue) {this.tagCtrl.disable();}if (changes.tags?.currentValue) {this.updateFilterTags();}}initTags() {this.tagCtrl.valueChanges.pipe(takeUntil(this.unsubscribeAll),startWith(null),map(async (value?: string) => {await this.updateFilterTags(value);})).subscribe();}async updateFilterTags(value?: string) {const conditions = [];if (this.type) {conditions.push({key: 'type',value: this.type,operator: '=',});}const response = value? this.tags?.filter((tag: Tag) => {const regex = new RegExp(`^${value}`, 'i'); return regex.test(tag.title?tag.title:'');}) || []: this.tags?.slice() || [];const selectedTagIds = this.selectedTags.map((tag: Tag) => tag.id);this.filteredTags = response.filter((tag: Tag) => !selectedTagIds.includes(tag.id));}
}

页面.html
 

<mat-label>{{title}}</mat-label>
<mat-form-field class="tag-chip-list" *ngIf="!hideComponent"><mat-chip-list #chipList aria-label="Tag selection" [disabled]="disabled"><mat-chip [color]="color" [class]="color"*ngFor="let tag of selectedTags; let i=index"(removed)="remove(tag)"><button matChipRemove><mat-icon svgIcon="CloseBlue" class="close-icon"></mat-icon></button>{{tag.name}}</mat-chip><inputplaceholder="Add another tag..."#tagInput[formControl]="tagCtrl"[matAutocomplete]="auto"[matChipInputFor]="chipList"[matChipInputSeparatorKeyCodes]="separatorKeysCodes"></mat-chip-list><mat-autocomplete #auto="matAutocomplete"(optionSelected)="selected($event)"><mat-option *ngFor="let tag of filteredTags" [value]="tag"[innerHTML]="tag.name"></mat-option></mat-autocomplete>
</mat-form-field>

这篇关于Angular material Chips Autocomplete的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---