Use ngFor with async pipe to display array of observables

Question

I'm having a hard time understanding why ngFor isn't working with an array of observables.

export class DashboardComponent implements OnInit {
    dwsubscriptions: Observable<Dwsubscription>[] = new Array();

    ngOnInit() {
        this.dwsubscriptions.push(
            this.devicewiseService.getSubscription('Randomizer', '1', 3, 1, -1)
        )
    }
}

Then my html

<div *ngFor="let dwsubscription of dwsubscriptions | async">
    <p>value: {{dwsubscription.params.data}}</p>
</div>

getSubscriptions is returning an observable

getSubscription(device: string, variable: string, type: number, count:number, length:number): Observable<Dwsubscription> {

I am getting the error

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

This works fine if I do async pipe on a single observable returned from getSubscription(). Why can't I push those observables to an array and then iterate through them in my template using ngFor?

dwsubscriptions is not an Observable / async. It seems like you want to do *ngFor="let dwsubscription of dwsubscriptions" and then {{ (dwsubscription | async).params.data — Explosion Pills
A better question is why do you have an array of Observables vs. getting an array of data from one Observable? — Explosion Pills
I would suggest you to use forkJoin from the component itself — Jameel Moideen

ovidiup ovidiup · Accepted Answer · 2018-11-07T17:40:30

You are creating an array of observables. You'll have to loop over each observable and then use the async pipe for each one.

Try this:

<div *ngFor="let dwsubscription of dwsubscriptions">
  <div *ngIf="dwsubscription | async as dw">
    <p>value: {{dw.params.data}}</p>
  </div>
</div>

Use ngFor with async pipe to display array of observables

3 Answers