Question

我一直在搜索并想知道是否有任何指示可以帮助显示＆＃34;没有找到数据＆＃34;当表格在角度为2时是空的。或者更好的是，当我订阅获取的数据时，我可以在我的服务中创建该功能吗？

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

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


      </tbody>
</table>

Answer 1

如果没有任何元素 length ，请检查数组的 length ，然后将其显示为 {{1} } ，

NO DATA

Answer 2

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

更新：对于Angular 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>

Answer 3

如果要显示未找到数据的消息。在表标签之前检查游戏是否有要迭代的项目。

像这样的东西

Master Table Fields:-
Person product categ price image field1 field2


Child Table (User customised):-
User Product categ customprice customfield1 customfield2

Query:-
totalrecords = Master.objects.filter(Person=person1).filter(categ=catogory1)
enabledrecords = Child.objects.filter(user=user).filter(categ=categ1)

在模板中使用hasData（）

{% for obj in totalrecords %}
     if obj.id in enabledrecords (using product forign key) then 
     Get en_obj from enabledrecords__product
     {{obj.id}} {{en_obj.id}} {%if en_obj.customprice%} {{en_obj.customprice}}
     {%else%}{%obj.price%}{%endif%} -->do same for other customfields

     if obj.id not in enabledrecords 
     {{ obj.id }} <p> Product not customized click here to customise </p>

你可以构建＆amp;无论如何你都想要这样做。

Answer 4

将这些代码添加到您的html文件中

<div class="card-body">
   <mat-table[dataSource]="listData" [hidden]="!isTableHasData">
   .......
   .......
   </mat-table>
   <div [hidden]="isTableHasData" style="text-align: center;">
   no records found..
   </div>
 </div>

此代码适用于.ts文件

  isTableHasData = true;
      applyFilter(filterValue: string) {
        this.listData.filter = this.searchKey.trim().toLowerCase();
        if(this.listData.filteredData.length > 0) {
          this.isTableHasData = true;
        } else {
          this.isTableHasData = false;
        }
      }

只需使用此代码，希望它能解决您的问题。

Answer 5

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

在Angular 2中找不到记录

5 个答案: