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

来源

2017-04-13 Switz

标记angularjs只能用于Angular 1.x请不要拒绝编辑。 –

检查数组的长度，

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

来源

2017-04-13 09:08:03 Sajeetharan

如果你想显示一个消息，说没找到的数据。在表格标签之前检查游戏是否有要迭代的项目。

像这样的事情

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

使用hasData（）在模板

您可以构建&风格这个反正你想要的。

来源

2017-04-13 09:12:53 Nugu

您可以使用最新的功能从角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>

来源

2017-04-13 09:13:01

它可能不会在角2.3正确的？ – Switz

不，它不会工作。对于2.3，你必须设置两个条件：'

your content

'和'

No data found

'。但我建议您更新到Angular 4.迁移很简单;） –

我会尽快升级，但有时会造成一些错误，这些错误有时可能会解决。你能否通过重新编辑答案来让条件更清楚？ – Switz

-1

您可以使用*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>

来源

2017-08-10 12:14:41

在Angular 2中显示没有找到记录

回答

相关问题