옵션 그룹으로 재료 자동 완성에서 사용자 정의 필터를 재설정하는 방법

Question

재료 자동 완료 autocomplete에서 사용자 정의 필터 값을 재설정하는 방법은 무엇입니까? here과 같은 옵션 그룹으로 입력을 선택했습니다. 이제 결과를 필터링하고 옵션 그룹 이름을 지정하는 사용자 정의 필터를 만들고 싶습니다. 내 TS 파일에서처럼 내가 가진 내 HTML에서 이제

pokemonGroups = [ 
    { 
     name: 'Grass', 
     pokemon: [ 
     'bulbasaur-0', 'Bulbasaur', 'oddish-1','Oddish','bellsprout-2', 'Bellsprout' 
     ] 
    }, 
    { 
     name: 'Water', 
     pokemon: [ 
     'squirtle-3', 'Squirtle', 'psyduck-4','Psyduck', 'horsea-5', 'Horsea' 
     ] 
    }] 

:

<form [formGroup]="searchForm"> 
    <mat-form-field class="example-full-width"> 
    <input type="text" placeholder="Pokemon" aria-label="Pokemon" matInput formControlName="pokemonControl" [matAutocomplete]="auto"> 
    <mat-autocomplete #auto="matAutocomplete"> 
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled"> 
     <mat-option *ngFor="let poke of group.pokemon" [value]="poke"> 
      {{ poke }} 
     </mat-option> 
     </mat-optgroup> 
    </mat-autocomplete> 
    </mat-form-field> 
</form> 

내 타이프 라이터 파일 :

ngOnInit() { 
// ... code 
this.searchForm.controls.pokemonControl.valueChanges 
     .subscribe(
     (val) => { 
     this.filter(val); 
     } 
    ); 
} 
filter(val) { 
    for (const pokemon of this.pokemonGroups) { 
     pokemon.pokemon= pokemon.pokemon.filter(pok=> 
     pok.toLowerCase().indexOf(val.toLowerCase()) === 0); 
    } 

    return this.pokemonGroups; 
    } 

필터 잘 작동하지만 난 백 스페이스 키를 누르거나 삭제할 때 그런 다음 내 모든 가치를 재설정해야합니다. 어느 쪽이 작동하지 않습니다.

Answer 1

테스트하지는 않았지만 이렇게 시도 할 수 있습니다. 또한 확인하시기 바랍니다 this

ngOnInit() { 

this.pokemonControl.valueChanges 
     .subscribe(
     (val) => { 
     this.filter(val); 
     } 
    ); 
} 
    filter(val) { 

    for (const pokemon of this.pokemonGroups) { 
     pokemon.pokemon= pokemon.pokemon.filter(pokemon=> 
     pokemon.toLowerCase().indexOf(val.toLowerCase()) === 0); 
    } 
    return this.pokemonGroup; 
    }