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

Answer 2

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

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

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

Accessing result of async pipe in template from component code in Angular 2