如何获取Material 2(Angular 4)自动完成以搜索外部API

Question

我试图让Angular Material 2自动完成工作来搜索API,而不是按照示例在数组内搜索.这是我试过的:

HTML:

<mat-form-field fxFlex="33" class="mr-20 mt-20">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
      <span>{{ state.name }}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

TS:

this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
  .startWith(null)
  .debounceTime(400)
  .do(value => {
    this.ClientsService.search(value).then( res => {
      console.log(res, 'oi');
      this.states = res;
    })
  });

但是,当我输入时,我收到此错误: Error: Cannot find a differ supporting object 'e' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

请注意,这e是我在搜索字段中键入的内容.我从服务器获得的响应是​​一个包含对象的数组.

我在这里错过了什么？

Answer 1

如果states您希望在模板中显示,根据您将传入数据存储到的内容,那么您希望在模板中显示该内容.

所以:

<mat-option *ngFor="let state of states" [value]="state.name">

代替

<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">

与TS:

this.filteredStates = this.stateCtrl.valueChanges
  .startWith(null)
  .debounceTime(400)
  .do(value => {
    this.ClientsService.search(value).then( res => {
      console.log(res, 'oi');
      this.states = res;
    })
  })
  .subscribe()

带有随机Chuck Norris笑话的Plunker;)https://stackblitz.com/edit/angular-uu4cya?file=app%2Fapp.component.ts