将管道与 *ngIf 和 Observables 结合使用

Question

尝试在帖子 Observable 准备好之前显示模板：

    <ng-template #loading>
        <div>Loading...</div>
    </ng-template>

    <div *ngIf="posts | async else loading">
    {{ posts | json }}
    </div>  

当帖子 Observable 设置后，posts | json 呈现如下：

    { "_isScalar": false, "source": { "_isScalar": true, "value": [ { "title": "Simulating HTTP Requsts", "content": "This is off the hook!!" } ] }, "operator": { "delay": 3000, "scheduler": { "actions": [], "active": false } } }

我们如何让它只呈现我们通常通过posts | async 获得的值？

我尝试了posts | async | json，但它首先呈现null，然后在 3 秒后呈现值。

This is the stackblitz.

Answer 1

尝试：

<div *ngIf="posts | async as postsSync; else loading">
    {{ postsSync| json }}
 </div>  

您基本上想将可观察对象的“未包装”值绑定到模板变量，这可以通过这种方式完成。