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

Question

一个常见的案例：

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

我的问题是，当 heroes 不是 Hero 数组的 Observable，而是单个 Heros

的 Observable 时，如何实现相同的行为

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

Answer 1

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

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

上的工作示例

Use Template Input Variables outside of NgFor