个人中心
gpt4 book ai didi

angular - 在 observable 上使用异步管道并将其绑定(bind)到 html 中的局部变量
转载 作者：太空狗 更新时间：2023-10-29 16:49:24 25 4
gpt4 key购买 nike

您好，我有一个具有很多属性(姓名、职位、地址...)的可观察用户 $

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

有没有办法像这样在html模板中使用async pipe来订阅它并绑定(bind)到一个局部变量

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

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

干杯

最佳答案

# 是 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>

关于angular - 在 observable<Object> 上使用异步管道并将其绑定(bind)到 html 中的局部变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43325791/

25 4 0
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com