監視可能な配列の長さを確認する方法

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

しかし、list $ .lengthは、Observable配列の場合には機能しません。

更新：

それはそのようで長さは？。|（非同期リスト$を）：私たちの長さを与えますが、コードの下に、まだ動作しません。

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

更新-Angularバージョン6：

CSSスケルトンをロードする場合は、これを使用できます。配列に項目がない場合は、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>

.tsファイルのソリューション：

     this.list.subscribe(result => {console.log(result.length)});

Angular 4+の場合、これを試してください

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

この答えは正しいですが

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

httpクライアントを使用してバックエンドを呼び出す場合（ほとんどの場合、そうします）、リストが複数ある場合、APIの呼び出しが重複することに注意してください$ | 非同期。これは、非同期パイプは、list $オブザーバブルの新しいサブスクライバーを作成します。

これは私のために働いたものです-

*ngIf="!photos || photos?.length===0"

httpClient asyncからデータを取得しています。

ここにある他のすべてのオプションは私にとってはうまくいきませんでした。特にセクシーな（list $ | async）パイプ。

バサ

ここでのアプローチには、別の大きな問題があります。テンプレートで非同期パイプを何度も利用することで、実際には、単一のObservableへのその多くのサブスクリプションを開始します。

KAMRUL HASAN SHAHEDには上記の正しいアプローチがあります。非同期パイプを一度使用してから、子ノードで利用できる結果のエイリアスを提供します。

同様に短縮することができます：

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

括弧の前に感嘆符を使用してください。

イオン4

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

$看板を外したときにうまくいきました