Angular 搜索過濾器（由字符串數組組成）

Question

html：

<input matInput placeholder="Search" value="" formControlName="searchbar">

ts：

typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

我需要顯示與數組數據匹配的數據。

Answer 1

string[] = ['靴子', '木屐', '樂福鞋', '莫卡辛鞋', '運動鞋'];

let searchKey;（你必須搜索的值）

讓 Search = string.find((a) =>a.includes(searchKey);

你在 serch 變量中得到匹配值

Answer 2

HTML

<mat-form-field>
   <input matInput [matAutocomplete]="autoComplete"
      placeholder="Search" [formControl]="searchControl">
   <mat-autocomplete #autoComplete>
      <mat-option *ngFor="let shoe of filteredShoes" [value]="shoe"> {{shoe}} </mat-option>
   </mat-autocomplete>
</mat-form-field>

TS

  searchControl = new FormControl();
  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
  filteredShoes: string[];

  ngOnInit() {
     this.searchControl.valueChanges.subscribe(searchSrting => {
        this.filteredShoes = this.getSearchResult(searchSrting).slice();
  });

  getSearchResult(searchString: string): string[] {
     return this.typesOfShoes.filter(x => x.toLowerCase().includes(searchString.toLowerCase()))
  }