Angular PrimeNG Skeleton数据表

Angular PrimeNG是一个开源的前端UI库，它有许多原生的Angular UI组件，可以帮助开发人员建立一个快速和可扩展的网络解决方案。在这篇文章中，我们将看到Angular PrimeNG SkeletonDataTable.

当实际组件的数据在后台加载时，Skeleton组件是作为一个占位符使用的。为了显示一个Skeleton数据表，我们可以在表的主体模板中用p-skeleton组件替换列数据。

语法:

<p-table [value]="..." responsiveLayout="scroll">
   <ng-template pTemplate="header">
       <tr>
           ....
       </tr>
   </ng-template>
   <ng-template pTemplate="body" let-x>
       <tr>
           <td>
               <p-skeleton></p-skeleton>
           </td>
           <td>
               <p-skeleton></p-skeleton>
           </td>
           ....
       </tr>
   </ng-template>
</p-table>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG Skeleton数据表

Project Structure

运行下面的命令来运行该应用程序。

ng serve --open

例子1：这是一个基本的例子，说明如何显示一个有2列3行的Skeleton数据表格。

<div 
    class="page-content" 
    style="height: calc(100vh - 149px)">
      
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Skeleton DataTable</h4>
  
    <p-table [value]="tableData" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product>
            <tr>
                <td>
                    <p-skeleton></p-skeleton>
                </td>
                <td>
                    <p-skeleton></p-skeleton>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface People {
    firstname?: string;
    lastname?: string;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    tableData: People[] = [];
    constructor() { }
  
    ngOnInit() {
          
        this.tableData = [
            {
                firstname: 'Varun',
                lastname: 'Pratap',
            },
            {
                firstname: 'Badal',
                lastname: 'Mishra',
            },
            {
                firstname: 'Abhishek',
                lastname: 'Thakur',
            }
        ];
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
  
import { TableModule } from 'primeng/table';
import { SkeletonModule } from 'primeng/skeleton';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        FormsModule,
        SkeletonModule
          
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Skeleton数据表

例子2：这是另一个例子，展示了如何在Angular PrimeNG中使用一个Skeleton数据表格。这里我们有4列和8行。

<div 
    class="page-content" 
    style="height: calc(100vh - 149px)">
      
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Skeleton DataTable</h4>
  
    <p-table [value]="tableData" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Occupation</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product>
            <tr>
                <td>
                    <p-skeleton></p-skeleton>
                </td>
                <td>
                    <p-skeleton></p-skeleton>
                </td>
                <td>
                    <p-skeleton></p-skeleton>
                </td>
                <td>
                    <p-skeleton></p-skeleton>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface People {
    firstname?: string;
    lastname?: string;
    age?: number;
    occupation?: string;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    tableData: People[] = [];
    constructor() { }
  
    ngOnInit() {
          
        this.tableData = [
            {
                firstname: 'Varun',
                lastname: 'Pratap',
                age: 20,
                occupation: "Student"
            },
            {
                firstname: 'Badal',
                lastname: 'Mishra',
                age: 21,
                occupation: "Engineer"
            },
            {
                firstname: 'Abhishek',
                lastname: 'Thakur',
                age: 23,
                occupation: "Businessman"
            },
            {
                firstname: 'Karan',
                lastname: 'Patel',
                age: 19,
                occupation: "Sportsman"
            },
            {
                firstname: 'Pallavi',
                lastname: 'Yadav',
                age: 20,
                occupation: "Student"
            },
            {
                firstname: 'Abhinav',
                lastname: 'Yadav',
                age: 21,
                occupation: "Software Developer"
            },
            {
                firstname: 'Abhay',
                lastname: 'Rathore',
                age: 23,
                occupation: "Intern"
            },
            {
                firstname: 'Abhishek',
                lastname: 'Kumar',
                age: 34,
                occupation: "Doctor"
            },
        ];
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
  
import { TableModule } from 'primeng/table';
import { SkeletonModule } from 'primeng/skeleton';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        FormsModule,
        SkeletonModule
          
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Skeleton数据表