У меня возникли проблемы с повторной отправкой запроса после (optionSelected) на обновление входных значений для второго автозаполнения.
У меня есть два поля автозаполнения. После изменения значений в первом, второй принимает значения из api. Однако, когда я удаляю значение в первом поле, запрос для второго поля автозаполнения не обновляется.
Это образец моего кода:
OnProvinceSelected(event) {
this.provinceId = event.id;
this.filteredOptionsCountie = this.step.get('province').valueChanges.pipe(
startWith(''),
debounceTime(400),
distinctUntilChanged(),
map(val => typeof val === 'string' ? val : val.name),
switchMap(val => {
return this.filterCountie(val || '');
}),
finalize(() => console.log('Sequence complete'))
);
}
filterCountie(val: string): Observable<Location[]> {
return this.service.getDataCounties(this.provinceId)
.pipe(
map(response => response.filter(option => {
return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0;
})),
finalize(() => console.log('Sequence complete'))
);
}
<input formControlName="province"
type="text"
[matAutocomplete]="provinceA">
<mat-autocomplete #provinceA="matAutocomplete" [displayWith]="displayFn" (optionSelected)="OnProvinceSelected($event.option.value)">
<mat-option *ngFor="let option of filteredOptionsProvinces | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
<input formControlName="countie"
type="text"
[matAutocomplete]="countieA">
<mat-autocomplete #countieA="matAutocomplete" [displayWith]="displayFn" (optionSelected)="OnCountieSelected($event.option.value)">
<mat-option *ngFor="let option of filteredOptionsCountie | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>