在模板中获取异步结果并用作普通变量？

Question

我一直在尝试重构一些 Angular 代码以利用异步管道并摆脱我的组件中的一堆订阅，但是当我最终在模板中看起来真的很乱必须异步传输大量对 Observable<Item> 变量的引用，而不是将其作为 Item.

分配一次

有没有办法将可观察的结果流分配给模板中的变量，然后正常使用它？例如，从这个开始：

    <div *ngIf="item | async">
        <p>{{ (item | async).property1 }}</p>
        <p>{{ (item | async).property2 }}</p>
        <p>{{ (item | async).property3 }}</p>
    </div>

像这样：

    <div *ngVariableHere="(item | async) as item">
        <p>{{ item.property1 }}</p>
        <p>{{ item.property2 }}</p>
        <p>{{ item.property3 }}</p>
    </div>

或者在这种情况下，是否更 'Angular way' 仅订阅组件中的可观察对象并将结果值分配给 item？

非常感谢！

Answer 1

您在第二个示例中很接近，请尝试 let item 而不是 as item

<div *ngIf="item | async; let item">
    <p>{{ item.property1 }}</p>
    <p>{{ item.property2 }}</p>
    <p>{{ item.property3 }}</p>
</div>

STACKBLITZ

这是一个使用 ng-template 并通过 $implicit

传递对象的 stackblitz 示例

https://stackblitz.com/edit/ng-template-vhp6m4?file=src/app/app.component.html

Here is SO answer used to create example

在模板中获取异步结果并用作普通变量？

get async result in template and use as a normal variable?

asynchronous

observable

rxjs

angular