angular - 有没有办法将管道的结果保存在 Angular 2 的模板输入变量中？

Question

我真的很喜欢 *ngFor 指令的语法。您可以遍历数组的所有元素。

我想用管道的结果实现同样的事情。例如 async 管道。将 async 管道放置在我使用可观察结果的属性的模板中的任何位置时，我有很多订阅正在进行并且我的模板被诸如 {{( someObservable$ | async)?.propertyName}}。有没有办法像这样简单地将管道的当前结果绑定(bind)到模板输入变量？

<div let="currentValue = someObservable$ | async">
  {{currentValue?.foo}}, {{currentValue?.bar}}
  ...
</div>

我尝试将它与 *ngIf 结合使用，但这似乎不是一个有效的模板表达式:

<div *ngIf="let currentValue = someObservable$ | async">
  {{currentValue?.foo}}, {{currentValue?.bar}}
  ...
</div>

Answer 1

是的!从 Angular 4+ 开始，我们可以存储成功 *ngIf 的结果，例如:

<div *ngIf="userObservable | async; else loading; let user">
  Hello {{user.last}}, {{user.first}}!
</div>
<template #loading>Waiting...</template>

If you need same with *ngFor, simply wrap it in *ngIf ;-)

Source