angular

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}} </h3>
</div>

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

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

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

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

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

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

或原始值的space，

<div *ngIf="(primitive$ | async) || ' '; let primitive">
  <h3> {{primitive}} </h3>
</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 的值（非美元后缀）。

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

angular - using async pipe on observable<Object> and bind it to local variable in html

typescript

pipe

local-variables

angular2-observables