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
项目结构: 它将如下所示:
示例 1: 下面是一个简单的示例,演示了 Angular PrimeNG TreeTable EmptyMessage 的使用。
app.component.html
CODEBLOCK_94560de0
app.component.ts
CODEBLOCK_418fa8b2
app.module.ts
CODEBLOCK_18e13434
输出:
示例 2: 在这个例子中,我们将数据的加载延迟了 5 秒钟。在数据加载完成之前,我们会将 EmptyMessage 作为一个占位符来展示。
app.component.html
“
技术分享平台
Angular PrimeNG TreeTable 空消息示例
{{ col.header }}
<ng-template pTemplate="body"
let-rowNode let-rowData="rowData"
let-columns="columns">
*ngIf="i == 0