Angular8

Question

我正在尝试让自动完成由 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);
    });

在浏览器控制台中，我没有收到任何类型的错误消息。

Answer 1

由@bunyamin-coskuner 解决：

was just a typo. There is nothing wrong with your code. In your code, you wrote filteredAddressees but in html you wrote filteredAdressees

Angular8 - 从 API 端点获取数据到自动完成

Angular8 - Getting data to an autocomplete from an API endpoint

autocomplete

typescript

angular-material

angular