Use async pipe in ngFor on Observable of Observables (Angular)

Question

I have variable defined like this: myVar: Observable<Observable<MyObject>[]>.

I am using Angular4 feature to enumerate with async pipe

*ngFor="let obsMyObject of (myVar | async)"

now I have Observable of MyObject, but I need just MyObject. I could write something like that:

<div *ngFor="let obsMyObject of (myVar | async)">
    <div *ngIf="let obsMyObject | async; let MyObject"></div>
</div>

but I can not do this in inner div, because I am setting flex order (which doesn't have any effect on inner div) property so I need something like this:

<div *ngFor="let obsMyObject of (myVar | async); let MyObject = (obsMyObject | async)"
    [style.order]="MyObject.order">
</div>

I just had one idea how to do this, and I tried this:

<div *ngFor="let obsMyObject of (myVar | async); let MyObject = obsMyObject)">
    {{MyObject}}
</div>

but MyObject is undefined, so there is no way let MyObject = (obsMyObject | async) would work.

What should be the difference between `obsMyObject` and `MyObject`? — Günter Zöchbauer, Dec 09 '17 at 14:30
Why do you have an observable of an observable? It sounds like you need to rewrite whatever provides it, e.g. to use flatMap rather than map. — jonrsharpe, Dec 09 '17 at 14:30
`obsMyObject` is `BehaviorSubject` and as that I can not use it to set style.order property. — Makla, Dec 09 '17 at 14:31

score 1 · Answer 1 · answered Dec 09 '17 at 14:57

I think you want to use an ng-container and an ngIf to subscribe and create reference to the observable. Then from within the ng-container you can reference this new variable as if it was a plain object.

<ng-container *ngIf="myVar$| async as myVar">
   <div *ngFor="let obsMyObject of myVar">
    {{obsMyObject }}
   </div>
</ng-container>

The use of myVar and object is really confusing. Here's a better example:

Property in component declared as:

users$: Observable<User[]>

And the template:

<ng-container *ngIf="users$ | async as users">
   <div *ngFor="let user of users">
     {{ user.name }}
   </div>
</ng-container>

This is not it. I have `Observable[]>` which is not `Observable`. I need 2 Observables, because both array of users and user changes. — Makla, Dec 09 '17 at 18:33

Use async pipe in ngFor on Observable of Observables (Angular)

1 Answers1

Linked