Angular PrimeNG TreeTable EmptyMessage(空消息)的使用指南

Angular PrimeNG 是一个开源框架,拥有丰富的原生 Angular UI 组件集,这些组件不仅样式出众,还能让我们非常轻松地构建响应式网站。在这篇文章中,我们将深入探讨如何在 Angular PrimeNG 中使用 TreeTable 的 EmptyMessage(空消息)功能。

Angular PrimeNG 的 TreeTable EmptyMessage 充当着一个占位符的角色,每当 TreeTable 组件中没有数据时,它就会显示出来。EmptyMessage 让 TreeTable 组件更具交互性,也是在无数据状态下的一个良好展示方式。

语法:


   
      
              暂无记录
      
    

 

创建 Angular 应用与模块安装:
步骤 1: 使用以下命令创建一个 Angular 应用。

ng new appname

步骤 2: 创建项目文件夹(即 appname)后,使用以下命令进入该目录。

cd appname

步骤 3: 在指定目录中安装 PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构: 它将如下所示:

!image

示例 1: 下面是一个简单的示例,演示了 Angular PrimeNG TreeTable EmptyMessage 的使用。

app.component.html


CODEBLOCK_94560de0

app.component.ts


CODEBLOCK_418fa8b2

app.module.ts


CODEBLOCK_18e13434

输出:

!image

示例 2: 在这个例子中,我们将数据的加载延迟了 5 秒钟。在数据加载完成之前,我们会将 EmptyMessage 作为一个占位符来展示。

app.component.html


技术分享平台

Angular PrimeNG TreeTable 空消息示例

{{ col.header }}

<ng-template pTemplate="body"

let-rowNode let-rowData="rowData"

let-columns="columns">

<p-treeTableToggler [rowNode]="rowNode"

*ngIf="i == 0

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。如需转载,请注明文章出处豆丁博客和来源网址。https://shluqu.cn/43450.html
点赞
0.00 平均评分 (0% 分数) - 0