Async Pipe Error While Using Observable in Angular 2 App

Question

I have pagination working in my Angular 2 app but am running into an issue where I'm getting an error re: the async pipe:

Invalid argument '' for pipe 'AsyncPipe'

In the research I've done re: this error, it usually has to do with the fact that the async pipe expects an observable. This is confusing to me, because I am using an observable, so I'm not sure what the issue is.

First, here's my relevant view code:

<tr *ngFor="let record of records | async | paginate: { id: 'stream', itemsPerPage: 15, currentPage: page, totalItems: total }">

This component is using an Input() from another component, like this:

@Input() records = [];

And here's "records" from that other component, which is an observable I'm subscribing to OnInit:

ngOnInit() {
   this.streamService.getBySection('section1')
        .subscribe(resRecordsData => this.records = resRecordsData,
        responseRecordsError => this.errorMsg = responseRecordsError);
}

What am I missing here? Do I need to explicitly declare this as type observable somewhere?

Presumably you mean to resolve the observable, paginate then iterate over the result? In which case let record of (records | async | paginate: { ... })". But it appears that the observable is already resolved, by the .subscribe, in your class, and not exposed to the template as an observable. — jonrsharpe
– jonrsharpe, Commented Mar 7, 2017 at 22:08
The parentheses clarify the order of operations, which can sometimes go awry. But the problem you have is that records doesn't appear to be an observable. — jonrsharpe
– jonrsharpe, Commented Mar 7, 2017 at 22:11

Adnan A. · Accepted Answer · 2017-03-07 22:11:52Z

4

Async pipe expect an observable, not the resolved data.

ngOnInit() {
   this.records = this.streamService.getByStage('section1');
}

answered Mar 7, 2017 at 22:11

Adnan A.

1,9821 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Muirik Over a year ago

Thanks, so I guess my thought is, is the "async" pipe redundant in this scenario then? No need to use it if I've already returned the result of the observable. Right?

Adnan A. Over a year ago

That is correct. You can just remove the async, if you're not binding to an Observable, but a plain object.

Muirik Over a year ago

Okay, makes sense. Thanks.

Collectives™ on Stack Overflow

Async Pipe Error While Using Observable in Angular 2 App

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related