angular - 如何避免模板中的异步链？

Question

我有以下模板：

<app-order-about [application]="(applicationObs | async)?.application"></app-order-about>
<app-order-documents [documents]="(applicationObs | async)?.application?.documents"></app-order-documents>

我不喜欢这个符号：?.application?.documents因为它很长而且看起来很糟糕。

还async调用了两次观察者请求，我可以改用 promise 吗？

Answer 1

您可以as像async这样使用：

<ng-container *ngIf="applicationObs | async as app">
    <app-order-about [application]="app.application"></app-order-about>
    <app-order-documents [documents]="app?.documents"></app-order-documents>
</ng-container>

来自角度文档：https ://angular.io/api/common/NgIf#storing-a-conditional-result-in-a-variable