Я пытаюсь сделать автозаполнение для подачи ответа об оставшемся API (вместо локального массива).
Вот мой код прямо сейчас:
Компонент TS :
public filteredAddressees: Observable < Addressee[] > ;
public addresseesCtrl = new FormControl();
[...]
displayFnAddressee(): string | undefined {
return undefined;
}
private _filterAddressees(value: string): Observable < Addressee[] > {
console.log(`_filterAddressees(${value})`);
return this.addresseeService.getFilteredList(value.toLocaleLowerCase()).pipe(
map((response: any) => {
return response.items;
})
);
}
getFilteredAddressees() {
console.log(`GetFilteredAddressees(${this.addresseesCtrl.value})`);
this.filteredAddressees = this.addresseesCtrl.valueChanges.pipe(
startWith(''),
debounceTime(500),
switchMap(val => {
console.log(`switchMap(${val})`);
document.getElementById('noFocus').blur();
return this._filterAddressees(val || '');
}));
}
selChangedAddressee(e: MatAutocompleteSelectedEvent) {
this.addAddressee(e.option.value);
}
И это HTML:
<mat-form-field class="full-width">
<input matInput id="noFocus" placeholder="Add user" (click)="getFilteredAddressees()" [matAutocomplete]="auto" [formControl]="addresseesCtrl">
<mat-autocomplete (optionSelected)="selChangedAddressee($event)" id="autocomplete" [displayWith]="displayFnAdressee" #auto="matAutocomplete">
<mat-option *ngFor="let addressee of filteredAdressees | async" [value]="addressee">
{{ addressee.name }} {{ addressee.surname }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Но, очевидно, он никогда не достигнет инструкции switchMap, и если я изменю входное значение, он также не перехватит Событие formControl valueChange.
Однако, если я улавливаю изменение значения формы следующим образом, оно реагирует каждый раз, когда я меняю значение:
this.addresseesCtrl.valueChanges.subscribe(val => {
console.log('value changed', val);
});
В консоли браузера я ничего не получаю сообщения об ошибке.