Use ngFor with async pipe to display array of observables

user_5092005 0
Viewed 2851

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?

angular typescript
3 Answers

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>

user_80114020

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>
user_30723660

Try using joinFork

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

);

user_91003100
Related