0
如何重置物料自動填充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;
}
過濾器工作正常,但當我按空格鍵或刪除關鍵字,那麼它應該重置我的所有值。哪個不起作用。
這裏最好做一個過濾器並填寫自動完成。因此,爲寵物小精靈的類型和自動完成過濾器。 – Swoox