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

Question

我在 Angular 中有一些 html block ，我想用可观察值的一些嵌套值填充，例如:

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

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

Answer 1

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

Controller

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 所示，您可以使用安全导航运算符 ?. 来避免潜在的未定义错误。