角度 *ngIf= "data$ async as data && data.payload; else noContent"

Question

我想有条件地显示一个包含数据的块，否则我将显示一个noContent块。 数据是从服务器获取的。

<ng-container *ngIf="data$ async as data && data.payload; else noContent">
{{data.payload | json}}
</ng-container>
<ng-template #noContent> No content found </ng-template>

注意：1-我不想实现两个s，即：

<ng-container *ngIf="data$ async as data ; else noContent">
<ng-container *ngIf="data.payload; else noContent">
{{data.payload | json }}
</ng-container>
</ng-container>
...

2-以下语句有效

*ngIf="xx && yy"
*ngIf="data$ as data"
*ngIf="xx && data$ as data"
*ngIf="(data$ as data)?.payload?.length>0; else noContent"

Answer 1

像这样尝试

<ng-container *ngIf="(data$ | async ) as d; else noContent">
<ng-container *ngIf="d.payload?.length > 5 ;else noContent">
<h3>
{{d.payload | json}}
</h3>
</ng-container>
</ng-container>

<ng-template #noContent> No content found </ng-template>

演示 🚀🚀