Angular *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- Я не хочу реализовывать два, то есть:

<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>

демо