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

Question

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

在组件TypeScript代码中，我创建一个Reactive Extensions Observable（items$）并在模板中的ngFor - 指令中使用它与异步管道。

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

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

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

Answer 1

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

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

请参阅此处的示例https://angular.io/api/common/NgForOf

Answer 2

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

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

这样，您无需订阅流，可以继续使用异步管道，但是如果将新值iit保存在items变量中。