CODEWITHSUNDEEP
javascriptangularasynchronoustypescript
Muirik
Muirik

Reputation: 6289

Async Pipe Error While Using Observable in Angular 2 App

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?

Upvotes: 1

Views: 1028

Answers (1)

Adnan A.
Adnan A.

Reputation: 1982

Async pipe expect an observable, not the resolved data.

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

Upvotes: 4

Related Questions