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

Question

嗨,我有一个可观察的用户$,有很多属性(名称,标题,地址......)

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

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

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

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

干杯

Answer 1

#是模板引用变量.它遵循DOM元素,不能像那样使用.

到目前为止,Angular中没有实现局部变量,可以监视此已关闭的问题以获取对相关问题的引用.

从Angular 4开始,语法ngIf和ngFor指令被更新为允许局部变量.有关详情,请参阅ngIf参考 所以有可能做到

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

这将创建div包装元素并为其提供隐藏行为,因此不需要?.'Elvis'操作符.

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

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

如果不希望隐藏行为,则可以将表达式更改为truthy占位符值.

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

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

或原始价值的空间,

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

Answer 2

@Bjorn Schijff和@estus

代替:

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

做:

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

Answer 3

使用以下语法：

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

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

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