Я использую угловой материал. Когда я фильтрую, выбор работает правильно, но прежде чем пользователь что-то наберет, я хочу показать все опции, которые он может выбрать. Фильтрация происходит с контролем формы, но как я могу показать все опции, прежде чем пользователь что-то введет?
Проблема возникает, когда я пытаюсь this.filteredCountries = x;тогда происходит ошибка, но в HTML я должен использовать |Асинхронная фильтрация позже через form.control.valuechanges proeprty
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList aria-label="Fruit selection">
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="country"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let country of filteredFruits$ | async" [value]="fruit">
{{ country.strength }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
this.service.getStrengths()
.subscribe(x => {
this.countries = x;
this.filteredCountries = x;
}
country = new FormControl(null, {
validators: Validators.required
});
filteredCountries;
this.filteredCountries = this.country.valueChanges
.pipe(
map(country => country ? this._filterCountry(country) : this.countries.slice())
);
this.filteredCountries = this.country.valueChanges
.pipe(
map(country => country ? this._filterCountry(country) : this.countries.slice())
);