如何使用来自html的异步管道获取可观察对象的嵌套值

Posted 2023-03-05

【中文标题】如何使用来自html的异步管道获取可观察对象的嵌套值

【英文标题】：How to get nested values of an observable using async pipe from html

【发布时间】：2021-03-02 22:37:30

【问题描述】：

我在 Angular 中有一些 html 块，我想用一些可观察对象的嵌套值来填写，例如：

  <div class="container" *ngIf="(myObservable$ | async)  as myObservable">
    <span> myObservable.middleNest.value1 </span>
    <span> myObservable.middleNest.value2 </span>
  </div>

有没有办法在容器标签中定义一个变量，以便我能够通过 middleNest.value1 和 middleNest.value2 获取嵌套值（确保中间嵌套的路径完全非空）？考虑到在某些情况下，值可能是深度嵌套的，因此必须在跨度中编写到中间嵌套的整个路径似乎是不对的。

【问题讨论】：

你可以尝试实现这个solution。

【参考方案1】：

您可以在控制器中使用 RxJS pluck 运算符从可观察响应中仅返回特定属性

控制器

export SomeComponent implements OnInit 
  myObservable$: Observable<any>;

  ngOnInit() 
    this.myObservable$ = this.someService.getData().pipe(
      pluck('middleNest')
    );
  

现在您在 async 发射中拥有了 middleNest 对象。

<div class="container" *ngIf="(myObservable$ | async) as middleNest">
  <span> middleNest?.value1 </span>
  <span> middleNest?.value2 </span>
</div>

也如@uiTeam324 所示，您可以使用安全导航运算符?. 来避免潜在的未定义错误。

【参考方案2】：

您可以使用safeOperator(?)。它将在内部检查undefined

<div class="container" *ngIf="(myObservable$ | async)  as myObservable">
  <span> myObservable?.middleNest?.value1 </span>
  <span> myObservable?.middleNest?.value2 </span>
</div>