如何在ngIf表达式中使用Multiple as关键字？

Question

我的组件中有一个divisors(n) divisors，如下所示：

note$

Observable的类型为this.note$ = this.serverService.makeGetReq({url:"some_url"})

在我的模板中：

note$

但是当Observable<{body:INote, errorCode:string}>解析为<div class="container" *ngIf="(note$|async).body as note">...</div> 时出现以下错误：

note$

为避免上述错误，我做了以下事情：

null

但是我得到一个错误：

ERROR TypeError: Cannot read property 'body' of null

我的猜测是，这是由于在同一表达式中使用两个<div class="container" *ngIf="(note$|async) as value && value.body as note">...</div> 关键字而导致的无用的错误消息

如何避免此错误？

Answer 1

  <div class="container" *ngIf="(note$|async)?.body as note">...</div>

Answer 2

在这种情况下，即使您在notes $上使用了异步，也应使用 safe navigation operator 处理null。但是我认为不需要身体。

  <div class="container" *ngIf="(note$|async)?.body as note">...</div>

应该是这样

<div *ngIf="note$| async as notes" class="notes-zone" >