Async Pipe Error While Using Observable in Angular 2 App

1
votes

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?

1
javascriptangularasynchronoustypescript
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
How is that different from what I already have? - Muirik
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

1 Answers

4
votes

Async pipe expect an observable, not the resolved data.

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