Angular PrimeNG表页

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架可用于制作响应式网站，非常容易。在这篇文章中，我们将看到如何在Angular PrimeNG中使用表页。

Angular PrimeNG表页在表组件中实现了分页功能。因此，使用分页器选项，我们可以很容易地根据我们的需要将表的数据分页到多个页面上。为了分页器选项，我们需要将分页器属性设置为 “true”，同时声明rows属性，以提及每页的行数。

语法:

<p-table [paginator]="true" [rows]="1"></p-table>

创建Angular应用程序和模块安装。

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

ng new appname

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

cd appname

第3步在你给定的目录中安装PrimeNG。

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

项目结构：它将看起来像如下。

Angular PrimeNG表页

例子1：下面是一个简单的例子，演示了Angular PrimeNG表页的使用，在这个例子中，我们将分页器属性设置为true，并将5行分页应用于表元素。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Page</h4>
  
<p-table [value]="tableData" [paginator]="true" [rows]="5">
    <ng-template pTemplate="header">
        <tr>
            <th pSortableColumn="firstname">First Name 
                <p-sortIcon></p-sortIcon>
            </th>
  
            <th pSortableColumn="age">Age 
                <p-sortIcon></p-sortIcon>
            </th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" let-people sortMode="multiple">
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

import { Component } from "@angular/core";
  
interface People {
  firstname?: string;
  lastname?: string;
  age?: string;
}
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  tableData: People[] = [];
  cols: any[] = [];
  constructor() {}
  
  ngOnInit() {
    this.cols = [
      { field: "firstname", header: "First Name" },
      { field: "lastname", header: "Last Name" },
      { field: "age", header: "Age" },
    ];
    this.tableData = [
      {
        firstname: "David",
        lastname: "ace",
        age: "10",
      },
      {
        firstname: "AJne",
        lastname: "west",
        age: "11",
      },
      {
        firstname: "Mak",
        lastname: "Lame",
        age: "12",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "13",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "14",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "14",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "15",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "16",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "17",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "18",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "18",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "19",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "20",
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot
        ([{ path: "", component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG表页

实例2：下面是另一个演示Angular PrimeNG表页使用的例子，在这个例子中，我们将分页器属性设置为true，并对表元素应用1行分页。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Page</h4>
  
<p-table [value]="tableData" [paginator]="true" [rows]="1">
    <ng-template pTemplate="header">
        <tr>
            <th pSortableColumn="firstname">First Name 
                <p-sortIcon></p-sortIcon>
            </th>
  
            <th pSortableColumn="age">Age 
                <p-sortIcon></p-sortIcon>
            </th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" let-people sortMode="multiple">
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

import { Component } from "@angular/core";
  
interface People {
  firstname?: string;
  lastname?: string;
  age?: string;
}
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  tableData: People[] = [];
  cols: any[] = [];
  constructor() {}
  
  ngOnInit() {
    this.cols = [
      { field: "firstname", header: "First Name" },
      { field: "lastname", header: "Last Name" },
      { field: "age", header: "Age" },
    ];
    this.tableData = [
      {
        firstname: "David",
        lastname: "ace",
        age: "10",
      },
      {
        firstname: "AJne",
        lastname: "west",
        age: "11",
      },
      {
        firstname: "Mak",
        lastname: "Lame",
        age: "12",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "13",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "14",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "14",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "15",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "16",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "17",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "18",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "18",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "19",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "20",
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot
        ([{ path: "", component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}