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;@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}}