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

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

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

{{myObservable.middleNest.value1}
{{myObservable.middleNest.value2}

---

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

您可以使用

safeOperator（？）

。它将在内部检查

未定义的

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


{{myObservable？.middleNest？.value1}
{{myObservable？.middleNest？.value2}
您可以在控制器中使用RxJS
pulk
操作符，仅从可观察响应返回特定属性

控制器

export SomeComponent实现OnInit{
myObservable$：可观察的；
恩戈尼尼特（）{
this.myObservable$=this.someService.getData（）.pipe(
拔
);
}
}

现在在
async
emission中有了
middleNest
对象


{{middleNest？.value1}
{{middleNest？.value2}

正如@uiTeam324所示，您可以使用安全导航操作符
？。
来避免潜在的未定义错误。
您可以尝试实现这一点。