角度 - 在 observable<Object> 上使用异步管道并将其绑定到 html 中的局部变量答案

【问题标题】：angular - using async pipe on observable<Object> and bind it to local variable in html角度 - 在 observable<Object> 上使用异步管道并将其绑定到 html 中的局部变量
【发布时间】：2017-09-05 15:39:02
【问题描述】：

您好，我有一个可观察的 user$，它有很多属性（姓名、头衔、地址...）

component{
  user$:Observerable<User>;
  constructor(private userService:UserService){
    this.user$ = this.userService.someMethodReturningObservable$()
  }
}

有没有办法使用html模板中的异步管道来订阅它并将其绑定到像这样的局部变量

<div #user="user$ | async">
  <h3> {{user.name}}
</div>

我知道可以在构造函数中订阅它，然后在 OnLeave/OnDestroy 中取消订阅，但我只是好奇是否可以使用异步管道。

干杯

【问题讨论】：

据我所知异步管道仅适用于 *ngFor ？因为你可以做到这一点*ngFor="let u of (user = (user$ | async))" 但看起来很可疑。需要一点实用性。
not async 也可以在单个 observable 上工作，请参阅 ngrx/store :)

标签： angular typescript pipe local-variables angular2-observables

【解决方案1】：

# 是 template reference variable。它遵循 DOM 元素，不能这样使用。

局部变量目前没有在 Angular 中实现，this closed issue 可以监控相关问题的引用。

自 Angular 4 起，ngIf 和 ngFor 指令的语法已更新为允许局部变量。有关详细信息，请参阅ngIf reference。所以可以这样做

<div *ngIf="user$ | async; let user">
  <h3> {{user.name}} </h3>
</div>

这将创建div 包装元素并为其提供隐藏行为，因此不需要?. 'Elvis' 运算符。

如果不需要额外的标记，可以将其更改为

<ng-container *ngIf="user$ | async; let user">...</ng-container>

如果不希望隐藏行为，则可以将表达式更改为真实的占位符值。

占位符可以是对象值的空对象，

<div *ngIf="(user$ | async) || {}; let user">
  <h3> {{user?.name}} </h3>
</div>

或原始值的空间，

<div *ngIf="(primitive$ | async) || ' '; let primitive">
  <h3> {{primitive}} </h3>
</div>

【讨论】：

这对我有用，但是我收到警告说'of' expected。我认为这是一个 tslint 警告，但很难找到任何信息。
@Blexy 很难说这里出了什么问题，它看起来像是某些消息的一部分。
是的，我在'of' expected 上遇到了同样的错误，我正在尝试对其进行改革，以便对 linter 和 Angular 都有意义，但结果证明这有点困难预期的。感觉就像async 管道的自动魔法。
@BjornSchijff 你确定'of' expected 的解决方法了吗？
@Blexy 实际上，您没有提到这是IDE warning。 TSLint 不关心模板。

【解决方案2】：

@Bjorn Schijff 和@estus

代替：

<div *ngIf="(user$ | async) || {}; let user">

做：

<div *ngIf="(user | async) as user">

【讨论】：

是的，我有 angular 4.4.3
框架支持as 和let。为什么要以这种方式而不是另一种方式来完成？
我不知道，它适用于 Angular 4.4.3。也许两者都适用于角度 5。
@WooliDesign 给出的示例作品，这里是文档link for ref
这样做会在 Angular 8 中得到未解决的变量错误。

【解决方案3】：

使用以下语法：

<div *ngIf="(user | async) as user">

注意：在表达式末尾添加“as user”。

这将做的是等到用户$ | async 已评估，并将结果绑定到 user 的值（非美元后缀）。

【讨论】：

这与@WooliDesign 的回答有何不同？