从Angular 2中的组件代码访问模板中异步管道的结果

Question

在Angular 2中，我有一个带有模板的组件。

在组件TypeScript代码中，我创建了一个Reactive Extensions Observable（ items$ ），并在带有async-pipe的模板中的ngFor使用它。

这样我就不必担心订阅和取消订阅自己了。

<div *ngFor="let item of items$ | async"></div>
...
</div>

现在从组件代码我想访问项目列表，但没有订阅它。 是否有一种方法可以从模板中移回项目列表的副本或引用？

Answer 1

您可以在组件中执行此操作：

items$.pipe(tap(items => this.items = items);

这样，您不会订阅流，并且可以继续使用异步管道，但如果发出新值，它将保存在items变量中。

Answer 2

从Angular 4+开始，您可以使用as特殊语法（也适用于*ngIf ）：

<div *ngFor="let item of items$ | async as items"></div>
  {{ items.length }} ...
</div>