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

【问题标题】：get async result in template and use as a normal variable?在模板中获取异步结果并用作普通变量？
【发布时间】：2020-11-09 17:25:05
【问题描述】：

我一直在尝试重构一些 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>

或者在这种情况下，只是订阅组件中的可观察对象并将结果值分配给item，是否更像是“Angular 方式”？

非常感谢！

【问题讨论】：

是item 一个具有许多属性的对象，还是一组对象？
在这个例子中是前者。我想我可以将item 映射到它自己的单项数组并通过*ngFor="let item of (items | async)" 完成此操作，但这对我来说似乎超级讨厌。

标签： angular asynchronous rxjs observable

【解决方案1】：

你在第二个例子中很接近，试试let item而不是as item

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

堆栈闪电战

这是一个使用ng-template 并通过$implicit 传递对象的stackblitz 示例

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

这是用于创建示例的 SO 答案

What is $implicit in angular 2?

【讨论】：

我爱你。如果（出于某种原因）我不想要 *ngIf 指令怎么办？定义let item 是否需要某种其他结构指令？
我相信是的。因为*ngIf 变成<ng-template [ngIf]="'item'" let-item> 我不确定如何将 let 与结构指令分离。有人可能知道怎么做，可惜我不知道
有趣。也许可以编写一个只进行模板投影的空结构指令。然后它可以用于捕获变量并将它们传输到动态创建的模板实例。 github.com/angular/angular/blob/…
@elpddev 认为您正在做某事。更新的答案包括 stackblitz 显示通过$implicit 传递object 的示例。这将是避免*ngIf 的详细解决方案，但我发现它很有趣，所以我添加到答案中。