Question

我的模板有类似......

<div> {{ (profile$ | async).username}}</div>
<div> {{ (profile$ | async).email}}</div>

有没有办法将（profile | async）分配给局部变量？必须为每个字段输入它都不利于可读性。

感谢。

Answer 1

自Angular 4.0.0-rc.1（2017-02-24）以来，您可以使用增强的*ngIf语法。这样你就可以在模板局部变量中分配*ngIf条件的结果：

<div *ngIf="profile$ | async as profile">
    <div>{{profile.username}}</div>
    <div>{{profile.email}}</div>
</div>

更新后的*ngIf documentation详细介绍了使用async和*ngIf的许多优秀示例。

请务必查看then的{{1}}和else声明。

Cory Rolan做了short tutorial你可以在5-10分钟内消化。

Answer 2

最好的方法是创建一个新组件，例如在这种情况下app-profile并将profile | async传递给该组件。在组件内部，您可以根据需要为变量命名。

<app-profile [profile]="profile | async"></app-profile>

Answer 3

这有点像hacky但我似乎有很多使用这样的例子：

<template ngFor let-profile [ngForOf]="profile$ | async">
  <div> {{ profile.username }}</div>
  <div> {{ profile.avatar }}</div>
  <div> {{ profile.email }}</div>
  ...
</template>

Answer 4

有另一种选择，但它更乏味。 GünterZöchbauer提出的解决方案可以减轻这一事实。

另一种方法是订阅组件内部的observable，然后在模板中使用订阅变量。您必须在OnDestroy事件中取消订阅订阅以防止内存泄漏。异步管道为你做这件事。这就是为什么接受的解决方案更清洁。但是如果你不想创建一个新的组件，这就是你要走的路。

异步管道模板中的局部变量（角度2 +）

4 个答案: