Angular2 n - ottenere argomento non valido [oggetto oggetto] ... per pipe 'AsyncPipe'

Question

Viene visualizzato un errore nel tentativo di visualizzare i risultati della chiamata di servizio. La pagina html ha un ngFor con il carattere | asincrona. Posso effettuare la chiamata, ottenere i risultati, ma ricevere un errore quando provo a eseguire il rendering della pagina. So che la variabile deve essere osservabile affinché l'async funzioni. Non sono sicuro di cosa sto sbagliando e ho provato diverse cose. Qualsiasi intuizione è apprezzata.

messaggio di errore: Invalid argument '[object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [oggetto Oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [object Object], [object Object]' per tubo 'AsyncPipe'

variabile Definizioni

public products:Observable<Product[]>; 

chiamata al servizio

ngOnInit() { 

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

}

Chiamata di servizio

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> 

dati dalla chiamata

Answer 1

Async tubo ha bisogno di un Observable piuttosto che un Array.

Nel tuo caso solo cercare di rimuovere async:

<tbody *ngFor="let product of products"> 

cambiarne anche definizione di variabile:

public products:Array<Product> = []; 

Spiegazione: array | async fa subscribe da solo.

Il codice

this.productService.load().subscribe(
    data => { 
    // Set the products Array 
    this.products = data['_embedded'].products; 
    },... 

trasforma un Observable per Array of Products

Aggiornamento: questo funziona già in modo async: dal products è un array vuoto, ngFor non viene eseguito.Quando Observable ottiene una risposta e popola i dati in products, un giro change detection avviene e passa attraverso ngFor nuovo (ora prodotti che popolano)

Un'altra cosa strana che ho notato (potrei sbagliarmi):

ngFor molto come dovrebbe essere su tr:

<tbody> 
    <tr *ngFor="let product of products | async"> 
    ... 
    </tr> 
</tbody> 

In questo caso si dovrà più righe e un solo tbody