在Observable of Observables（Angular）上的ngFor中使用异步管道

Question

我有这样定义的变量：myVar: Observable<Observable<MyObject>[]>。

我正在使用Angular4功能枚举异步管道

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

现在我有MyObject的Observable，但是我只需要MyObject。我可以这样写：

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

但我无法在内部div中执行此操作，因为我正在设置flex order（对内部div没有任何影响）属性，因此我需要这样的操作：

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

我只是有一个想法如何做到这一点，我尝试了：

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

但是MyObject是未定义的，因此let MyObject = (obsMyObject | async)无法正常工作。

Answer 1

我认为您想使用 anng-container和 anngIf来订阅并创建对可观察对象的引用。然后，您可以从内部ng-container引用这个新变量，就像它是一个普通对象一样。

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

myVar 和 object 的使用确实令人困惑。这是一个更好的例子：

组件中的属性声明为：

users$: Observable<User[]> 

和模板：

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