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

In meiner Angular 2-Komponente 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 bei einem Observable-Array nicht.

Aktualisieren:

Es scheint, dass (Liste $ | async)?. Länge gibt uns die Länge, 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?

Sie können das | asyncRohr verwenden:

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

Update - Angular Version 6:

Wenn Sie ein CSS-Skelett laden, können Sie dies verwenden. Wenn das Array keine Elemente enthält, wird die CSS-Vorlage angezeigt. Wenn Daten vorhanden sind, füllen Sie die aus 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>

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

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

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>

Während diese Antwort richtig ist

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

Beachten Sie, dass Sie, wenn Sie den http-Client zum Aufrufen des Backends verwenden (in den meisten Fällen), doppelte Aufrufe an Ihre API erhalten, wenn Sie mehr als eine Liste $ | haben asynchron . Dies liegt daran, dass jeder | Async Pipe erstellt einen neuen Abonnenten für Ihre Liste $ beobachtbar.

Das hat bei mir funktioniert -

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

Ich erhalte meine Daten von httpClient async.

Alle anderen Optionen hier haben bei mir nicht funktioniert, was enttäuschend war. Besonders die sexy (Liste $ | async) Pfeife.

Basa ..

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

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

Kann auch gekürzt werden:

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

Verwenden Sie einfach das Ausrufezeichen vor der Klammer.

ionisch 4

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

Es hat funktioniert, als ich das $Schild entfernt habe