How to iterate over array in object with async pipe and dynamic property? [duplicate]

Question

I have two objects layers$ and arrayByLayerId$ that I get asynchronously in my component, the structure of the objects is as following :

interface Layer {
   id: number;
   ...
}

{
   1: []
   2: []
   ...
}

Is there a way to iterate over arrayByLayerId$ arrays with the async pipe in the template like something below (the syntax is not correct it's just to illustrate what I try to achieve) :

<div *ngFor="let layer of layers$ | async"
     [attr.id]="layer.id">

    <my-component *ngFor="let array of arrayByLayerId$[layer.id] | async" [array]="array"><my-component/>
</div>

Thanks !

doesn't work mean nothing. Are you sure that arrayByLayerId$[layer.id] | async is actually working? — Jacopo Sciampi
– Jacopo Sciampi, Commented Feb 18, 2020 at 8:27
Needs to be put though async pipe before member access [layer.id] — Andrew Allen
– Andrew Allen, Commented Feb 18, 2020 at 8:27
I guess you could use eg. foo$ = combineLatest([layers$, arrayByLayerId$]) and then foo$ | async — martin
– martin, Commented Feb 18, 2020 at 8:35

Philipp Meissner · Accepted Answer · 2020-02-18 09:59:28Z

2

arrayByLayerId$ does not have a value yet before you access its "layer.id" property. It should be like this :

 <my-component *ngFor="let array of (arrayByLayerId$ | async)[layer.id]" [array]="array"><my-component/>

edited Feb 18, 2020 at 9:59

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

answered Feb 18, 2020 at 8:28

Ethan Vu

2,9971 gold badge12 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

How to iterate over array in object with async pipe and dynamic property? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related