web-dev-qa-db-ja.com

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配列の長さを確認する方法を教えてください。

angularobservableangular2-templateangular2-services
82
Naveed Ahmed

| 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>
134
Günter Zöchbauer

.tsファイルのための解決策：

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

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>
8
KAMRUL HASAN SHAHED

この答えは正しいですが

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

あなたがバックエンドを呼び出すためにhttpクライアントを使っているなら（ほとんどの場合あなたがそうする）あなたがそれ以上のものを持っているならあなたはあなたのAPIへの重複呼び出しを受けるでしょうlist $ | async。これは、非同期パイプはあなたのリスト$ observableへの新しい購読者を作成します。

4
Andzej Maciusovic

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

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

HttpClientからデータを非同期で取得しています。

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

バサ..

2
Tzvi Gregory Kaidanov

同様に短縮できます：

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

括弧の前に感嘆符を使用するだけです。

0
Daniyal Lukmanov

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

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

0
Harry Beckwith