CODEWITHSUNDEEP
angularangular2-directives
B Hull
B Hull

Reputation: 3223

using async pipe with angular2 not working

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?

Upvotes: 4

Views: 6867

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202216

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, i.e. 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

Upvotes: 4

Related Questions