Angular8 - получение данных для автозаполнения из конечной точки API - PullRequest
1 голос
/ 27 апреля 2020

Я пытаюсь сделать автозаполнение для подачи ответа об оставшемся 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);
    });

В консоли браузера я ничего не получаю сообщения об ошибке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...