ng-zorro 中nz-table 表单中nzNoResult的使用

ng-zorrow 库中的nz-table表单在无数据的情况下会默认一个无数据提示框,但是在项目中有时候需要调整这个显示框的内容,按照官放文档说明没有达到预期效果,

研究了下 最终发现了两种实现方式,一种是官方说明的方式 代码如下

采用模板的方式改写默认的样式

<nz-table  [nzData]="listOfData" [nzNoResult]="noResultTpl" *ngIf="listOfData.length>0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of listOfData">
      <td>{{data.name}}</td>
      <td>{{data.age}}</td>
      <td>{{data.address}}</td>
      <td>
        <a>Action 一 {{data.name}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #noResultTpl>
fff
</ng-template>


这种方式是采用官方的说明问文档,其中要写的方式需要注意下;
[nzNoResult]="' '" 需要有空格 不能写成 [nzNoResult]=""或者[nzNoResult]="''"

<
nz-table [nzData]="List" [nzNoResult]="' '"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> <th>Action</th> </tr> </thead> <tbody> <tr *ngFor="let data of List"> <td>{{data.name}}</td> <td>{{data.age}}</td> <td>{{data.address}}</td> <td> <a>Action 一 {{data.name}}</a> <nz-divider nzType="vertical"></nz-divider> <a>Delete</a> </td> </tr> </tbody> </nz-table>

 

posted @ 2023-04-15 10:51  若水如引  阅读(296)  评论(0编辑  收藏  举报