web-dev-qa-db-fra.com

Comment obtenir la saisie semi-automatique de Material 2 (Angular 4) pour rechercher un API externe

J'essaie d'obtenir Angular Material 2 autocomplete de rechercher une API au lieu de chercher dans un tableau, comme dans l'exemple. C'est ce que j'ai essayé:

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

Cependant, lorsque je tape, je reçois cette erreur: Error: Cannot find a differ supporting object 'e' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Notez que e est ce que je tape dans le champ de recherche. La réponse que je reçois du serveur est un tableau contenant des objets.

Qu'est-ce que j'oublie ici?

angularmaterial-designangular-material2
6
WagnerMatosUK

Si vous souhaitez afficher states dans votre modèle, en fonction de l’enregistrement des données entrantes, c’est ce que vous souhaitez afficher dans le modèle. 

Alors faites:

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

au lieu de

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

avec 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()

Plunker avec des blagues aléatoires de Chuck Norris;) https://stackblitz.com/edit/angular-uu4cya?file=app%2Fapp.component.ts

7
AJT_82

Très probablement, vous avez oublié d'analyser le résultat que vous obtenez du serveur.

this.states = JSON.parse(res);

Cela devrait résoudre le problème.

1
TruckDriver