首页 > 其他分享 >ng-zorro 中nz-table 表单中nzNoResult的使用

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

时间:2023-04-15 11:02:33浏览次数:28  
标签:name nzNoResult zorro ng nz Action table data

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>

 

标签:name,nzNoResult,zorro,ng,nz,Action,table,data
From: https://www.cnblogs.com/yanwuming/p/17320683.html

相关文章

  • Yunzai-BotQQ账号登录报错:token失效: [禁止登录]你当前使用的QQ版本过低,请前往QQ官网i
    token失效:[禁止登录]你当前使用的QQ版本过低解决方案写在前面:该问题是TX认为账号有被用作BOT的嫌疑,而阻止你登陆。但是由于是我们人类在登陆,用来卡BOT的验证码测试肯定可以通过,TX就用“版本过低”的问题来卡我们!!TX我***网上尝试了许多方法,包括对device.json大改特改,还说什么......
  • Yunzai-Bot运行报错:[ERRO] puppeteer Chromium 启动失败 解决方法
    前提:一定是本机安装了chrome各路方法汇总:重新下载puppeteer依赖(与现版本似乎不匹配)解决yunzai云崽报错puppeteerChromium启动失败|花落尽终归尘(clt6.cn)ln-vsflibre2.so/lib/libre2.so.9小白求教,puppeteerChromium启动失败·Issue#I65JGY·时雨◎星空/TR......
  • Huananzhi X99-AD3 Intel E5-2696v3黑苹果efi引导文件
    原文来源于黑果魏叔官网,转载需注明出处。(下载请直接百度黑果魏叔)硬件型号驱动情况主板HuananzhiX99-AD3处理器IntelE5-2696v3已驱动内存64GB(2*32)DDR3ECC1866Samsung已驱动硬盘SamsungPM961512GBNVMe已驱动显卡GigabyteRadeonRX5600XTWindForceOC6GB已驱动声卡......
  • Debian下的压缩 (zip) 解压缩 (unzip) 命令
    安装aptinstall-yzipzip命令zip-rfilename.zip./*-r选项是指递归地(recursively)压缩指定目录(./当前目录)中的所有文件和文件夹zip-rfilename.zipfile1file2file3/path把file1、file2、file3、以及/path目录的内容(假设这个目录存在)压缩起来,......
  • KEENZY中科易安|联网智能门锁采用何种锁芯?
    常言道“一把钥匙只能开一把锁”,至于开与不开的关键就在于“锁芯”。锁芯可称为门锁的心脏,是控制联网智能门锁开关的重要构件。根据《GA/T73-2015机械防盗锁标准》,锁芯......
  • KEENZY中科易安|这把联网智能门锁体验感A+
    如果来一次古人与今人的谈话,那一定离不开的话题就是“智能设备”。智能手机、智能电脑、智能手表更新换代如此之快,联网智能门锁亦是如此。对于用户而言,使用智能设备最重要......
  • KEENZY中科易安|适用于校园学生公寓的联网智能门锁
    常言道:365行,行行出状元。每一个行业都有其特色,每一个行业都离不开一个共同的话题——安全。 以联网智能门锁为例,早期的普通智能门锁主要应用于家庭、酒店等场景,能够满足......
  • 百度、cnzz、piwik 统计ajax请求方法
    百度统计:<scripttype="text/javascript">$('area').click(function(){//目标urlvarbaiduStatUrl=$(this).attr('href').replace('http://','......
  • geotools存储带高程的Polygon(PolygonZM)
    geotools读取带高程的Polygon:geotools写入带高程的Polygon:>>Postgis如何读写带高程的多边形:https://www.cnblogs.com/2008nmj/p/17109774.html(MultiPolygonZ)   ST......
  • KEENZY中科易安|公租房智能门锁提升保障房服务水平
    近年来,广西多地依托中科易安公租房智能门锁、保障房管理系统开展智慧公租房项目,切实提升了物业管理服务水平以及住户出行体验。 中科易安基于公租房打造的数智化通行解决......