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
– Explosion Pills, Commented Nov 7, 2018 at 17:25
A better question is why do you have an array of Observables vs. getting an array of data from one Observable? — Explosion Pills
– Explosion Pills, Commented Nov 7, 2018 at 17:30
I would suggest you to use forkJoin from the component itself — Jameel Moideen
– Jameel Moideen, Commented Nov 7, 2018 at 17:45

ovidiup · Accepted Answer · 2018-11-07 17:40:30Z

0

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>

answered Nov 7, 2018 at 17:40

ovidiup

313 bronze badges

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

Comments

Pezetter · Accepted Answer · 2018-11-07 17:50:02Z

0

Your question implies that you want an array of Observables. That means you would need to fix how you reference dwsubscriptions in your html. dwsubscriptions is not an Observable in your example. It is an array of Observables. So no need to use the async pipe on dwsubscriptions ;

Heres a quick Stackblitz example

The chaing comes from:

<ul>
  <li *ngFor="let obs of dwsubscriptions">
  {{obs | async | json}}
  </li>
</ul>

answered Nov 7, 2018 at 17:50

Pezetter

2,8542 gold badges25 silver badges41 bronze badges

Comments

Daniel · Accepted Answer · 2019-07-29 11:35:45Z

0

Try using joinFork

this.results = forkJoin(this.locations, this.distances).pipe(
  map(([locations, distances]) => locations.concat(distances))

);

answered Jul 29, 2019 at 11:35

Daniel

7336 silver badges19 bronze badges

Collectives™ on Stack Overflow

Use ngFor with async pipe to display array of observables

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related