Come controllare la lunghezza di un array osservabile


109

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.


Risposte:


179

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>

4
Ho provato anche quello ma restituisce l'errore "TypeError: Impossibile leggere la proprietà" length "di null"
Naveed Ahmed

3
Difficile da sapere dalle informazioni che hai fornito. Prova <div *ngIf="(list$ | async)?.length==0">No records found.</div>(aggiunto ?)
Günter Zöchbauer

6
Ho provato questo e funziona <div * ngIf = "(list $ | async) ?. length == 0"> Nessun record trovato. </div>
Naveed Ahmed

3
L'addizionale ?è richiesto perché list$viene impostato solo dopo che Angular2 tenta di eseguire il rendering della vista la prima volta. ?impedisce che il resto della sottoespressione venga valutato fino a quando la parte a sinistra di ?diventa != null(Elvis o operatore di navigazione sicura).
Günter Zöchbauer

1
@ GünterZöchbauer mi sembra che il primo asyncpipe risolva i dati e quindi il mio prossimo asyncpipe on loop non mostra nulla. O forse *ngIfcrea un ambito aggiuntivo e quindi non funziona. Difficile da dire. Ma mentre il mio ciclo è avvolto all'interno di if, non mostra alcun dato. Se si valuta truecorrettamente.
Eugene

31

Una soluzione per i file .ts:

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

non è necessario cancellarsi subito dopo?
Peter

È meglio annullare l'iscrizione alle osservabili sul onDestroycomponente
ThPadelis

16

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>

7

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.


4

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


2

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.


1

Può essere anche accorciato:

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

Usa semplicemente il punto esclamativo prima delle parentesi.


-3

ionico 4

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

ha funzionato quando ho rimosso il $segno

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.