如何使用选项组重置材质自动完成中的自定义过滤器答案

【问题标题】：How to reset the Custom Filter in Material Autocomplete with groups of options如何使用选项组重置材质自动完成中的自定义过滤器
【发布时间】：2018-05-31 11:41:51
【问题描述】：

如何在材料自动完成autocomplete 中重置自定义过滤器值。我已经使用here 之类的选项组选择输入。现在我想创建一个自定义过滤器来过滤我们的结果及其选项组名称。就像在我的 ts 文件中一样：

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'
      ]
    }]

现在在我的 html 中：

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

过滤器工作正常，但是当我按退格键或删除关键字时，它应该重置我的所有值。这是行不通的。

【问题讨论】：

这里最好进行过滤并填充自动完成。所以一个类型的过滤器和口袋妖怪的自动完成。

标签： angular autocomplete angular-material2 angular5

【解决方案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;
  }

【讨论】：