Comment vérifier la longueur d'un tableau Observable

Question

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 list$.length ne fonctionne pas dans le cas d'un tableau Observable.

Mise à 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 m'indiquer comment vérifier la longueur d'un tableau Observable.

Answer 1

Vous pouvez utiliser le | async tuyau :

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

Answer 2

Une solution pour les fichiers .ts :

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

Answer 3

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>

Answer 4

Bien que cette réponse soit correcte

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

Gardez à l'esprit que si vous utilisez un client http pour appeler le backend (ce qui est le cas dans la plupart des cas), vous obtiendrez des appels en double vers votre API si vous en avez plusieurs. list$ | async . En effet, chaque tuyau asynchrone crée un nouvel abonné à votre observable list$.

Answer 5

C'est ce qui a marché pour moi -

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

Je reçois mes données de httpClient async.

Toutes les autres options ici n'ont pas fonctionné pour moi, ce qui est décevant. Surtout le tube sexy (list$ | async).

Basa