Comment vérifier la longueur d'un tableau observable

Dans mon composant Angular 2, j'ai un tableau observable

list$: Observable<any[]>;

Dans mon modèle j'ai

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

Mais la liste $ .length ne fonctionne pas avec dans le cas d'un tableau Observable.

Mettre à jour:

Il semble que (list $ | async)?. Length nous donne la longueur mais le code ci-dessous ne fonctionne toujours pas:

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

Quelqu'un peut-il s'il vous plaît guider comment vérifier la longueur du tableau observable.

Vous pouvez utiliser le | asynctuyau:

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

Mise à jour - Angular Version 6:

Si vous chargez un squelette css, vous pouvez l'utiliser. Si le tableau ne contient aucun élément, il affichera le modèle css. S'il y a des données, remplissez le 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>

Une solution pour .ts-Files:

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

Pour Angular 4+, essayez ceci

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

Bien que cette réponse soit correcte

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

Gardez à l'esprit que si vous utilisez le client http pour appeler le backend (dans la plupart des cas, vous le faites), vous obtiendrez des appels en double vers votre API si vous avez plus d'une liste $ | asynchrone . C'est parce que chaque | async pipe créera un nouvel abonné à votre liste $ observable.

C'est ce qui a fonctionné pour moi -

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

Je récupère mes données depuis httpClient async.

Toutes les autres options ici ne fonctionnaient pas pour moi, ce qui était décevant. Surtout le tube sexy (list $ | async).

Basa ..

Votre approche ici présente un autre problème majeur: en exploitant le canal asynchrone à plusieurs reprises dans votre modèle, vous lancez en fait autant d'abonnements à l'unique Observable.

KAMRUL HASAN SHAHED a la bonne approche ci-dessus: utilisez le tube asynchrone une fois, puis fournissez un alias pour le résultat que vous pouvez exploiter dans les nœuds enfants.

Peut également être raccourci:

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

Utilisez simplement le point d'exclamation avant la parenthèse.

ionique 4

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

cela a fonctionné quand j'ai enlevé le $signe