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 TagsSelectComponent extends SubscriberWrapperComponent implements 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
; @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
{{title}}{{tag.name}}
