オプションのグループを使用してマテリアルオートコンプリートのカスタムフィルタをリセットする方法

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> 

マイtypescriptファイル：

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