Angular2 n - prise en argument non valide [object object] ... pour tuyau 'AsyncPipe'

J'obtiens une erreur lors de l'affichage des résultats de mon appel de service. La page html a un ngFor avec le | async. Je peux faire l'appel, obtenir des résultats, mais un message d'erreur lorsque vous essayez d'afficher la page. Je sais que la variable besoin d'être un Observables pour l'asynchrone à travailler. Je ne suis pas sûr de ce que je fais de mal et nous avons essayé plusieurs choses. Toute réflexion est apprécié.

Message D'Erreur:
Argument non valide '[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object] " pour tuyau 'AsyncPipe'

Définition De La Variable

  public products:Observable<Product[]>;

Appel au Service

ngOnInit() {

    this.productService.load().subscribe(
      data => {
        //Set the products Array
        this.products = data['_embedded'].products;
      },
      error => console.log('Could not find product catalog.')
    );

}

Appel De Service

 load() {
    return this._http.get(`http://localhost:8000/products`).map(response => response.json());
  }

HTML

<tbody *ngFor="let product of products | async">
          <tr>
            <td>{{product.sku}}</td>
            <td>{{product.materialNumber}}</td>
            <td>{{product.price}}</td>
            <td>{{product.baseUom}}</td>
            <td>{{product.packageSize}}</td>
            <td>{{product.casePack}}</td>
            <td>{{product.weight}}</td>
            <td>{{product.height}}</td>
          </tr>
          </tbody>

Des Données À Partir De L'Appel

Angular2 n - prise en argument non valide [object object] ... pour tuyau 'AsyncPipe'

OriginalL'auteur Don | 2016-06-30

angular angularjs-directive

14

Async pipe a besoin d'un Observable plutôt un Array.

Dans votre cas, essayez de supprimer async:
```
<tbody *ngFor="let product of products">
```
Également modifier la définition des variables:
```
public products:Array<Product> = [];
```
Explication:
array | async ne subscribe par lui-même.

Le code
```
this.productService.load().subscribe(
  data => {
    //Set the products Array
    this.products = data['_embedded'].products;
  },...
```
transforme une Observable à Array of Products

Mise à jour:
Cela fonctionne déjà dans async: depuis products est un tableau vide, ngFor ne fonctionne pas. Lorsque Observable obtient une réponse et remplit les données dans products, un change detection ronde prend de la place et passe par ngFor à nouveau (maintenant le remplissage de produits)

Une autre chose bizarre que j'ai remarqué (je peux me tromper):

ngFor ressemble devrait être sur tr:
```
<tbody>
   <tr *ngFor="let product of products | async">
   ...
   </tr>
</tbody>
```
Dans ce cas, vous aurez de multiples lignes et juste un tbody

Merci, oui dépose de l'asynchrone à partir de la ngFor fonctionne, mais je voulais avoir des choses à travailler avec l'async ... Merci pour vos commentaires
J'ai mis à jour la réponse avec plus d'explications
Merci Andrei.

OriginalL'auteur Andrei Zhytkevich

Vous devez vous connecter pour publier un commentaire.