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>