526互联

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

发布时间 2023-04-15 11:00:57作者: 若水如引

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>