角度模板：如何绑定RXJS Observable并读取其属性？

Question

我创建了这个界面：

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

我将其用作可观察对象，并将其作为输入传递到组件：

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

我可以看到使用JSON管道打印的值：

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

绑定到特定属性时，不显示任何内容（仅显示空字符串）：

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

Answer 1

NgRx 10提供了带有*ngrxLet指令的@NgRx/component包，这是一种在模板中绑定观测值的方便方法。

用法示例：

<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>

从NgRx文件：

当前将可观察对象绑定到视图的方式如下：*ngIf=“observeNumber$| async as n”。问题是*ngIf也会干扰渲染，如果出现错误值，组件将被隐藏。*ngrxLet指令接管了多项功能，同时使在模板中处理流更加方便和安全。

关于ngrxLet的解释性教程可以在这里找到。

Answer 2

使用*ngIf作为语法将async管道分解为单个调用（和单个订阅）。

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

这只创建了一个对可观察对象的订阅，它消除了对？。的需要，并使使用模板更加干净。

注意：我将原来的示例从game重命名为game$。

Answer 3

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

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

只有在可能发出null值时才需要？。