web-dev-qa-db-fra.com

Comment vérifier la longueur d'un tableau Observable

Dans ma composante angulaire 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 avec 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 puis-je vérifier la longueur du tableau Observable.

angularobservableangular2-templateangular2-services
70
Naveed Ahmed

Vous pouvez utiliser le tube | async:

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

Mise à jour - Version angulaire 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 existe des données, remplissez la variable 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>
117
Günter Zöchbauer

Une solution pour .ts-Files:

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

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

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 (dans la plupart des cas), vous obtiendrez des appels en double vers votre API si vous avez plus d'un list $ | async . C'est parce que chaque | Le tube async crée un nouvel abonné à votre liste $ observable.

3
Andzej Maciusovic

C'est ce qui a fonctionné pour moi - 

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

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

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

Basa ..

2
Tzvi Gregory Kaidanov

Peut aussi être raccourci:

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

Il suffit d'utiliser le point d'exclamation avant la parenthèse.

0
Daniyal Lukmanov

Votre approche ici présente un autre problème majeur: en exploitant sans cesse le canal asynchrone dans votre modèle, vous lancez autant d'abonnements à un seul observable. 

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

0
Harry Beckwith