Come controllare la lunghezza di un array osservabile

Nel mio componente Angular 2 ho un array Observable

list$: Observable<any[]>;

Nel mio modello ho

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

Ma list $ .length non funziona in caso di array Observable.

Aggiornare:

Sembra che (list $ | async) ?. length ci dia la lunghezza ma il codice seguente non funziona ancora:

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

Qualcuno può guidarmi su come controllare la lunghezza della matrice osservabile.

Puoi usare il | asynctubo:

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

Aggiornamento - Versione angolare 6:

Se stai caricando uno scheletro css puoi usarlo. Se l'array non ha elementi, visualizzerà il modello CSS. Se sono presenti dati, compila il 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>

Una soluzione per i file .ts:

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

Per Angular 4+, prova questo

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

Anche se questa risposta è corretta

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

Tieni presente che se stai usando il client http per chiamare il backend (nella maggior parte dei casi lo fai) otterrai chiamate duplicate alla tua API se hai più di un elenco $ | asincrono . Questo perché ogni | La pipe asincrona creerà un nuovo iscritto alla tua lista $ Observable.

Questo è ciò che ha funzionato per me -

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

Ricevo i miei dati da httpClient async.

Tutte le altre opzioni qui non hanno funzionato per me, il che è stato deludente. Soprattutto la pipe sexy (list $ | async).

Basa ..

Il tuo approccio qui ha un altro grosso problema: sfruttando ripetutamente il pipe asincrono nel tuo modello, stai effettivamente dando il via a tanti abbonamenti al singolo Observable.

KAMRUL HASAN SHAHED ha l'approccio corretto sopra: usa la pipe asincrona una volta e poi fornisci un alias per il risultato che puoi sfruttare nei nodi figli.

Può essere anche accorciato:

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

Usa semplicemente il punto esclamativo prima delle parentesi.

ionico 4

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

ha funzionato quando ho rimosso il $segno