Мат выберите фильтр для объекта Array

Question

Я хочу добавить опцию поиска в свой список выбора полей DropDown. Я прошел через много похожих вариантов работы, но они не работают для меня из-за массива объектов, который я передаю в Dropdown. любая помощь приветствуется. спасибо.

Мой код

HTML Файл

<mat-form-field>
   <mat-select (selectionChange)="getSubtier($event.value)">
     <input (keyup)="onKey($event.target.value)"> 
     <mat-option>None</mat-option>
     <mat-option *ngFor="let state of selectedStates" [value]="state">{{state.name}}</mat-option>
   </mat-select>
</mat-form-field>

Файл TS

 states: string[] = [
        {
          toptier_agency_id: 15,
          create_date: 1517428376464,
          update_date: 1560547998012,
          toptier_code: "013",
          abbreviation: "DOC",
          name: "Department of Commerce",
          website: "https://www.commerce.gov/",
          mapped_org_name: "COMMERCE, DEPARTMENT OF",
          display_yn: "Y"
        },
        {
          toptier_agency_id: 16,
          create_date: 1517428376787,
          update_date: 1560547999157,
          toptier_code: "014",
          abbreviation: "DOI",
          name: "Department of the Interior",
          website: "https://www.doi.gov/",
          mapped_org_name: "INTERIOR, DEPARTMENT OF THE",
          display_yn: "Y"
        }];


 selectedValue: string;
  selectedStates = [];

  ngOnInit() {
    this.selectedStates = this.states;
  }
  onKey(value) {
    this.selectedStates = this.search(value);
  }
  getSubtier(value) {
    console.log(value);
  }

  search(value: string) {
    // this.selectedStates=[]
   // let filter = value.toLowerCase();
    // this.selectedStates = this.selectedStates['name'].filter((unit) => unit.label.indexOf(value) > -1);
  }

StackBliz Демо

Answer 1

Изменить search функция. Используйте filter и includes

Попробуйте так:

onKey(value) {
  this.selectedStates = this.search(value);
}

search(value: string) {
  let filter = this.states.filter(item =>
    item.name.toLowerCase().includes(value.toLowerCase())
  );
  return [...filter];
}

Рабочая демонстрация

Answer 2

Попробуйте следующее:

введите фильтр со свойством isVisible

search(value: string) {
    return this.selectedStates.map(k => ({...k, isVisible:(k.name.toLowerCase().indexOf(value.toLowerCase()) > -1)}))  
}

добавьте геттер для отфильтрованного состояния

get filteredState() {
     return  this.selectedStates.filter(k=> k.isVisible === undefined || k.isVisible)
}

, затем в свой html замените selectedStates на filteredState

<mat-option *ngFor="let state of filteredState" [value]="state">{{state.name}}</mat-option>

TS Примечание: вы должны заменить states: string[] на states: any[] или на объект, который вы используете