using async pipe with angular2 not working

Question

Whenever i use the async pipe i am getting console errors.

   <component *ngFor="#c of columns | async" [column]="c"></component>

I get this console error:

EXCEPTION: Invalid argument '[object Object]' for pipe 'AsyncPipe' in [columns | async in Projects@1:51] browser_adapter.js:76 EXCEPTION: Invalid argument '[object Object]' for pipe 'AsyncPipe' in [columns | async in Projects@1:51]

Is there something missing?

Answer 1

The columns attribute must be either an observable or a promise (not an array or something else. See this line in the source code of Angular2 ( AsyncPipe class): https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/async_pipe.ts#L109 .

In the case of an HTTP call for example, you need to set the columns attribute with the returned observable directly. The async will be responsible to handle it, ie calling its subscribe method, dispose it. Here is a sample:

this.columns = 
   this.http.get('https://angular2.apispark.net/v1/companies/', {
     headers: headers
   }).map(res => res.json());

Instead of setting the `columns attribute from a subscribe method you manage by yourself:

this.http.get('https://angular2.apispark.net/v1/companies/', {
  headers: headers
})
.map(res => res.json())
.subscribe(data => this.columns = data);

Hope it helps you, Thierry