Comment vérifier la longueur d'une Observable tableau

Dans mon Angulaire 2 composante j'ai une Observable tableau

list$: Observable<any[]>;

Dans mon Template 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 liste$.la longueur de ce qui ne fonctionne pas dans le cas d'Observables tableau.

Mise à jour:

Il semble que (liste$ | async)?.longueur 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 s'il vous plaît guide comment puis-je vérifier la longueur des Observables tableau.

Rapporté à github.com/angular/angular/issues/9641

InformationsquelleAutor Naveed Ahmed | 2016-06-27

134

Vous pouvez utiliser le | async pipe:
```
<div *ngIf="(list$ | async)?.length==0">No records found.</div>
```
Mise À Jour - Angulaire De La Version 6:

Si vous chargez un Squelette css vous pouvez utiliser cette. Si le tableau n'a pas d'éléments, il affiche le modèle css. S'il existe des données puis de remplir 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>
```
- J'ai essayé aussi, mais il donne une erreur "TypeError: Cannot read property 'longueur', null"
- Difficile de savoir à partir de l'information fournie. Essayez <div *ngIf="(list$ | async)?.length==0">No records found.</div> (ajouté ?)
- J'ai essayé et ça marche <div *ngIf="(liste$ | async)?.longueur==0">Aucun enregistrement trouvé.</div>
- Supplémentaires ? est nécessaire car list$ est seulement après Angular2 essaie de rendre la vue la première fois. ? empêche le reste de la sous-expression à évaluer jusqu'à ce que la partie gauche de ? devient != null (Elvis ou la sécurité de la navigation de l'opérateur).
- Oui qui fait envoyer, mais le code ci-dessous ne fonctionne pas: <div> Longueur: {{(liste$ | async)?.longueur}} <div *ngIf="(liste$ | async)?.length>0"> <ul> <li *ngFor="laisser élément de la liste ($|async);"> {{item.firstName}} </li> </ul> </div> </div> Bien que la longueur de la liste est imprimée (p. 20), mais il ne rend pas la liste si placé sous le ngIf. Si je supprime ngIf, il commence à travailler. Pouvez-vous me guider?
- Jetez un oeil à plnkr.co/modifier/5KBEVj5Hhtx0BB5v3vVg?p=preview si vous supprimez <div *ngIf="(todos$ | async)?.length>0"> à partir de todo.composant, il va commencer l'affichage de la liste.
- est-il un moyen de faire un alias (liste$ | asynchrone) avec comme alias.longueur?
- Oui, cela devrait fonctionner avec recemt 4.x.x versions.
- Vouliez-vous dire cela? {{ (montableau | customPipe )?.longueur}}, Seul le lien n'a pas pris - je vais faire un essai plus tard - cheers
- désolé, stackoverflow.com/questions/44521254/...
- Comment ça fonctionne avec le as mot-clé: <ion-list *ngIf="!query && (uniqueTodayCollected | async) as today">. Vérifiez la longueur afin d'ions liste est masqué si uniqueTodayCollected.longueur == 0
- Pour corriger: github.com/angular/angular/issues/9641#issuecomment-299167085
InformationsquelleAutor Günter Zöchbauer

Une solution pour .ts-Fichiers:

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

InformationsquelleAutor Blank

Angulaire 4+, essayez cette

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

InformationsquelleAutor KAMRUL HASAN SHAHED

4

Alors que cette réponse est correcte
```
<div *ngIf="(list$ | async)?.length === 0">No records found.</div>
```
Garder à l'esprit que si vous utilisez un client http pour appeler backend (dans la plupart des cas, vous n') vous permettra d'obtenir un double des appels à votre API si vous avez plus qu'un liste$ | async. C'est parce que chaque | async pipe permettra de créer de nouveaux abonnés à votre liste$ observables.

InformationsquelleAutor Andzej Maciusovic
2

C'est ce qui a fonctionné pour moi -
```
*ngIf="!photos || photos?.length===0"
```
Je reçois mes données à partir de httpClient asynchrone.

Toutes les autres options ne fonctionne pas pour moi qui a été décevant.
En particulier, le sexy (liste$ | async) pipe.

Basa..

InformationsquelleAutor Tzvi Gregory Kaidanov
0

Votre approche ici a un autre problème majeur: en tirant parti de la async tuyau de cours et plus dans votre modèle, vous êtes réellement le coup d'envoi que de nombreux abonnements à la seule Observable.

KAMRUL HASAN SHAHED a le droit de l'approche ci-dessus: l'Utilisation de la async pipe une fois et ensuite fournir un alias pour le résultat que vous pouvez exploiter dans les nœuds enfants.

InformationsquelleAutor Harry Beckwith

Vous devez vous connecter pour publier un commentaire.