wake-up-neo.com

So überprüfen Sie die Länge eines Observable-Arrays

In meiner Komponente Angular 2 habe ich ein Observable-Array

list$: Observable<any[]>;

In meiner Vorlage habe ich

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

Die Liste $ .length funktioniert jedoch nicht im Falle eines Observable-Arrays.

Update:

Es scheint, dass (list $ | async)?. Length die Länge angibt, aber der folgende Code funktioniert immer noch nicht:

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

Kann mir jemand bitte zeigen, wie ich die Länge des Observable Arrays überprüfe.

angularobservableangular2-templateangular2-services
70
Naveed Ahmed

Sie können die | async-Pipe verwenden:

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

Update - Angular Version 6:

Wenn Sie ein CSS-Skelett laden, können Sie dieses verwenden. Wenn das Array keine Elemente enthält, wird die CSS-Vorlage angezeigt. Wenn Daten vorhanden sind, füllen Sie ngFor aus.

<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

Eine Lösung für .ts-Files:

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

Versuchen Sie dies für Angular 4+

<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

Diese Antwort ist zwar richtig

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

Denken Sie daran, dass Sie, wenn Sie den http-Client zum Aufruf des Backends verwenden (in den meisten Fällen), doppelte Aufrufe Ihrer API erhalten, wenn Sie mehr als eine list $ | async . Dies ist weil jeder | async pipe erstellt einen neuen Abonnenten für Ihre Liste $ observable.

3
Andzej Maciusovic

Das hat bei mir funktioniert - 

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

Ich erhalte meine Daten von httpClient async. 

Alle anderen Optionen hier haben für mich nicht funktioniert, was enttäuschend war. Besonders die sexy (list $ | async) -Pipe.

Basa ..

2
Tzvi Gregory Kaidanov

Kann auch gekürzt werden:

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

Verwenden Sie einfach das Ausrufezeichen vor der Klammer.

0
Daniyal Lukmanov

Ihr Ansatz hier hat ein weiteres großes Problem: Indem Sie die async-Pipe in Ihrer Vorlage immer wieder verwenden, starten Sie tatsächlich so viele Abonnements für das einzige Observable. 

KAMRUL HASAN SHAHED hat oben den richtigen Ansatz: Verwenden Sie die async-Pipe einmal und geben Sie dann einen Alias ​​für das Ergebnis an, das Sie in untergeordneten Knoten nutzen können.

0
Harry Beckwith