[解決済み] Observable配列の長さをチェックする方法

質問

Angular 2のコンポーネントで、Observableの配列があります。

list$: Observable<any[]>;

私のテンプレートでは

<div *ngIf="list$.length==0">No records found.</div>

<div *ngIf="list$.length>0">
    <ul>
        <li *ngFor="let item of list$ | async">item.name</li>
    </ul>
</div>

ただし、Observable配列の場合はlist$.lengthが効きません。

更新しました。

どうやら (list$ | async)?.length は長さを与えてくれるようですが、以下のコードはまだ動作しません。

<div>
    Length: {{(list$ | async)?.length}}
    <div *ngIf="(list$ | async)?.length>0">
        <ul>
            <li *ngFor="let item of (list$ | async)">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

Observable配列の長さをチェックする方法を教えてください。

どのように解決するのですか？

を使用することができます。 | async というパイプを使います。

<div *ngIf="(list$ | async)?.length==0">No records found.</div>

更新情報 - 2021-2-17

<ul *ngIf="(list$| async) as list; else loading">
   <li *ngFor="let listItem of list">
      {{ listItem.text }}
   </li>
</ul>

<ng-template #loading>
  <p>Shows when no data, waiting for Api</p>
  <loading-component></loading-component>
</ng-template>

アップデート - Angular バージョン 6。

cssのSkeletonを読み込んでいる場合、これを使うことができます。配列に項目がない場合は、cssのテンプレートを表示します。データがある場合は ngFor .

<ul *ngIf="(list$| async)?.length > 0; else loading">
   <li *ngFor="let listItem of list$| async">
      {{ listItem.text }}
   </li>
</ul>

<ng-template #loading>
  <p>Shows when no data, waiting for Api</p>
  <loading-component></loading-component>
</ng-template>