He estado buscando y preguntándome si hay alguna directiva para ayudar a mostrar "No se encontraron datos" en una tabla cuando la tabla está vacía en angular 2. O mejor aún, puedo crear esa funcionalidad en mis servicios cuando me suscribo a datos obtenidos. ?
<table> <tbody> <tr *ngFor="let game of Games"> </td> <td>{{game.name}}</td> <td>{{game.type}}</td> </tr> </tbody> </table>Puede usar la función más nueva de Angular 4.0.0 y agregar la declaración if else :
<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>Actualización : para Angular 2.X puede usar el siguiente enfoque:
<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>Verifique la length de la matriz si no hay elementos que usen la length , luego muéstrela como NO DATA ,
<li *ngIf="Games?.length == 0"> <span class="search_no_results"> No data found </span> </li>Si desea mostrar un mensaje que dice que no se encontraron datos. Antes de la etiqueta de la tabla, compruebe si Games tiene elementos para iterar.
Algo como esto
public hasData(): boolean { return (this.Games != null && this.Games.length > 0); }Usa hasData() en la plantilla
<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>Puede estructurar y diseñar esto de la forma que desee.