angular - 在observable上使用异步管道并将其绑定到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

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

到目前为止，Angular中没有实现局部变量，可以监视this closed issue以查找相关问题。

从Angular 4开始，ngIf和ngFor指令的语法被更新为允许局部变量。有关详细信息，请参阅ngIf reference。所以有可能做到

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