Angular2 n - getting invalid argument [object Object] ... for pipe 'AsyncPipe'

Question

I get an error to show the results of my service call. The html page has ngFor with | asynchronous. I can make a call, get the results, but get an error when I try to make a page. I know that a variable must be observable for async to work. I'm not sure what I am doing wrong, and have tried several things. Any insight appreciated.

Error message: Invalid argument "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] 'for the pipe' AsyncPipe '

Variable value

public products:Observable<Product[]>; 

Service call

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

}

Service call

  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> 

Call data

Answer 1

Async for the pipe requires an Observable , not an Array .

In your case, just try removing Async :

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

Also change the definition of the variable:

 public products:Array<Product> = []; 

Explanation: array | async array | async itself subscribe .

The code

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

converts a Observable to Array of Products

Update : This already works in Async way: since products is an empty array, ngFor does not start. When the Observable receives a response and fills the data in products , a round of change detection occurs and goes through ngFor (now fills the products)

Another weird thing I noticed (I could be wrong):

ngFor very similar to tr :

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

In this case you will have several lines and only one tbody