在mat中实现NgxMatSelectSearch -select angular

npm install ngx-mat-select-search --save
npm install @angular/material @angular/cdk --save

import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [
    // other imports
    NgxMatSelectSearchModule,
    MatSelectModule
  ],
  // other module properties
})
export class AppModule { }

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select>
    <ngx-mat-select-search [formControl]="searchSelect"></ngx-mat-select-search>
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  searchSelect = new FormControl();
  filteredOptions: Observable<string[]>;

  constructor() {
    this.filteredOptions = this.searchSelect.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}