Keine Datensätze in Angular 2 angezeigt

Question

Ich habe gesucht und frage mich, ob es eine Anweisung gibt, um "No data found" in einer Tabelle anzuzeigen, wenn die Tabelle in eckigen 2 leer ist. Oder noch besser kann ich diese Funktionalität in erstellen meine Dienste, wenn ich abonnierte Daten abonniere?

<table> 
    <tbody> 
     <tr *ngFor="let game of Games"> 

     </td> 
      <td>{{game.name}}</td> 
      <td>{{game.type}}</td> 
      </tr> 


     </tbody> 
</table> 

Answer 1

prüfen für die Länge des Arrays,

<li *ngIf="Games?.length == 0"> 
    <span class="search_no_results"> 
        No data found 
       </span> 
</li> 

Answer 2

Wenn Sie fanden eine Meldung angezeigt werden soll keine Daten sagen. Überprüfen Sie vor dem Table-Tag, ob Games Items zur Iteration enthält.

So etwas wie dieses

public hasData(): boolean { 
return (this.Games != null && this.Games.length > 0); 
} 

Verwenden HasData() in der Vorlage

<div *ngIf="!hasData()">No Data Found</div> 
<table *ngIf="hasData()"> 
    <tbody> 
     <tr *ngFor="let game of Games"> 

     </td> 
      <td>{{game.name}}</td> 
      <td>{{game.type}}</td> 
      </tr> 


     </tbody> 
</table> 

Sie können & Stil dieses in der Struktur wie man will.

Answer 3

können Sie die neueste Funktion verwenden, um von Angular 4.0.0 und if else Anweisung hinzuzufügen:

<div *ngIf="Games?.length;else no_data_templ"> 
    <table> 
     <tbody> 
      <tr *ngFor="let game of Games"> 
       <td>{{game.name}}</td> 
       <td>{{game.type}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

<ng-template #no_data_templ> 
    No daata found... 
</ng-template> 

aktualisieren: für Angular 2.X Sie den folgenden Ansatz verwenden:

<div *ngIf="Games?.length"> 
    <table> 
     <tbody> 
      <tr *ngFor="let game of Games"> 
       <td>{{game.name}}</td> 
       <td>{{game.type}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

<div *ngIf="! Games?.length"> 
    No data found... 
</div> 

Answer 4

können Sie verwenden *ngIf für bedingte zeigen/verbergen erforderliche DOM-Element