Question

我使用Angular 2和rxjs可观察。我创建了这个界面：

interface IGame {
    name: string;
    description: string;
}

我将它用作可观察对象并将其作为输入传递给ui：

@Input() public game: Observable<IGame>;

问题是当在UI中绑定整个对象时，我可以看到它的值打印并显示：

 <h3>{{game | json}}</h3>

虽然在屏幕上使用绑定特定属性（当然是游戏的一部分），但只是一个空字符串：

 <h3>{{game.name}}</h3>
 <h3>{{game.description}}</h3>

有可能吗？我应该通过姓名吗？描述为不同的输入？

Answer 1

async管道在视图绑定中执行订阅

 <h3>{{(game | async)?.name}}</h3>

?仅在可能会发出null值时才需要。

Answer 2

用于绑定多个属性的快捷方式

使用 * ngIf-As-Syntax 将async管道分解为单个调用（和单个订阅）。

  <ng-container *ngIf="( game$ | async ) as game">
    <h3>{{ game.name }}</h3>
    <h3>{{ game.description }}</h3>
  </ng-container>

这只会创建一个对可观察对象的订阅，它消除了对 ?. 的需求，并使模板的使用更加简洁。

注意：我将可观察到的原始示例从game重命名为game$。

Answer 3

2021 解决方案：ngrxLet

NgRx 10 提供了带有 *ngrxLet 指令的 @ngrx/component 包 - 一种在模板中绑定 observable 的便捷方式。

用法示例：

<ng-container *ngrxLet="observableNumber$ as n">
    <app-number [number]="n">
    </app-number>
</ng-container>

您甚至可以跟踪所有可观察到的通知：

<ng-container *ngrxLet="observableNumber$; let n; let e = $error, let c = $complete">
    ....
</ng-container>

<块引用>

当前将 observable 绑定到视图的方式如下：*ngIf="observableNumber$ | async as n"。问题是 *ngIf 也会干扰渲染，如果值为假，组件将被隐藏。 *ngrxLet 指令接管了几件事，同时使在模板中使用流更加方便和安全。

有关 ngrxLet 的说明性教程可以在 here 中找到。