Angular8-从API端点将数据自动完成

我正在尝试通过API rest响应（而不是本地数组）提供一个自动完成

这就是我现在的代码：

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);
}

---

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

由@bunyamin coskuner解决：

只是一个打字错误。你的代码没有问题。在代码中，您编写了filteredAddressees，但在html中，您编写了FilteredAddresses

---

由@bunyamin coskuner解决：

只是一个打字错误。你的代码没有问题。在代码中，您编写了filteredAddressees，但在html中，您编写了FilteredAddresses

---

它是否像您预期的那样击中了您的

控制台.log

s？它到达了第一个控制台.log，即“GetFilteredDressees（value）”一个，但没有到达“switchMap（value）”一个，这只是一个输入错误。你的代码没有问题。在你的代码中，你写了

FilteredAddresses

，但在html中你写了

FilteredAddresses

Ohh我的上帝。。。非常感谢你，我完全失明了…它是否像你期望的那样击中了你的

控制台.log

s？它到达了第一个控制台.log，即“GetFilteredAddressees（value）”一个，但没有到达“switchMap（value）”这只是一个输入错误。你的代码没有问题。在你的代码中，你写了

FilteredAddresses

，但在html中你写了

FilteredAddresses

Ohh我的上帝。。。非常感谢你，我完全失明了。。。

<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>

this.addresseesCtrl.valueChanges.subscribe(val => {
        console.log('value changed', val);
    });