在Angular 2中显示没有找到记录
问题描述:
我一直在搜索,并想知道是否有任何指令,以帮助在表中显示“没有数据”,当表是在角2中为空。或者更好的是,我可以创建该功能在我的服务,当我订阅提取的数据?在Angular 2中显示没有找到记录
<table>
<tbody>
<tr *ngFor="let game of Games">
</td>
<td>{{game.name}}</td>
<td>{{game.type}}</td>
</tr>
</tbody>
</table>
答
检查数组的长度,
<li *ngIf="Games?.length == 0">
<span class="search_no_results">
No data found
</span>
</li>
答
如果你想显示一个消息,说没找到的数据。在表格标签之前检查游戏是否有要迭代的项目。
像这样的事情
public hasData(): boolean {
return (this.Games != null && this.Games.length > 0);
}
使用hasData()在模板
您可以构建&风格这个反正你想要的。
答
您可以使用最新的功能从角4.0.0,并添加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>
更新:对角2.X您可以用下面的办法:
<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>
答
您可以使用*ngIf
进行条件式显示/隐藏所需DOM元素
<div *ngIf="!Games">
No data found!!!
</div>
<div *ngIf="Games">
<table>
<tbody>
<tr *ngFor="let game of Games">
<td>{{game.name}}</td>
<td>{{game.type}}</td>
</tr>
</tbody>
</table>
标记angularjs只能用于Angular 1.x请不要拒绝编辑。 –