在 NgFor 之外使用模板输入变量答案

【问题标题】：Use Template Input Variables outside of NgFor在 NgFor 之外使用模板输入变量
【发布时间】：2019-04-29 17:57:32
【问题描述】：

一个常见且熟悉的案例：

<div *ngFor="let hero of heroes$ |async">
  <span>{{hero.name}}</span>
</div>

我的问题是，当 heroes 不是 Heros 数组的 Observable 而是单个 Heros 的 Observable 时，如何具有相同的行为

<div *???="let hero of hero$ |async">
  <span>{{hero.name}}
</div>

【问题讨论】：

无需重复<span>{{(hero$ | async)?.name}}</span>
如果我在 Hero 类中有 15 个属性会怎样？订阅 observable 15 次？
<div *ngIf="(hero$ | async) as hero">{{hero.name}}{{hero.id}}{{hero.something}}</div>

【解决方案1】：

您不需要使用*ngFor 指令来解析单个对象，而是使用变量将异步属性分配给它并在 as 中使用该替代变量

<ng-container *ngIf="hero$ | async as hero">
    {{hero.name}}
</ng-container>

【讨论】：