极客教程Angular PrimeNG表的变化检测
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将学习Angular PrimeNG Table Change Detection.
表是用来以表格形式显示数据的。表需要意识到其数值的变化。由于性能问题，Push、Pop或其他操作在这种情况下不起作用。因此，我们需要使用spread operator或类似的方式来拼接创建一个新的数组引用。
语法:
// Modify the data
// Next splice and reference the new data array
this.data = [...this.data];
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new geeks_angular
第2步：在创建你的项目文件夹即geeks_angular之后，使用以下命令移动到它。
cd geeks_angular
第3步 。在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：安装成功后，将显示以下项目结构。
实例1 。在下面的例子中，我们用一个按钮修改了数据，把数据推到数组中。后来使用另一个按钮，表被更新。
- app.component.html:
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Table Change Detection</h3>
<h5>Basic</h5>
<p-table #dt [value]="tutorials"
dataKey="title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="0"
[globalFilterFields]="['title', 'category', 'rating']">
<ng-template pTemplate="caption">
<div class="table-header">
List of Tutorials
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text"
(input)=
"dt.filterGlobal($event.target.value, 'contains')"
placeholder="Global Search" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="title">
Title
<p-sortIcon field="title"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category
<p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="rating">
Rating
<p-sortIcon field="rating"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-tutorial>
<tr class="p-selectable-row">
<td>
<p-tableCheckbox [value]="tutorial"></p-tableCheckbox>
</td>
<td>
<span class="p-column-title"> Title </span>
{{ tutorial.title }}
</td>
<td>
<span class="p-column-title"> Category </span>
<span class="image-text">
{{ tutorial.category }}
</span>
</td>
<td>
<span class="p-column-title"> Rating </span>
<span class="image-text">
{{ tutorial.rating }}
</span>
</td>
</tr>
</ng-template>
</p-table>
<p-button label="Add Data"
(onClick)="handleClick()">
</p-button>
<p-button label="Update Table"
(onClick)="updateView()">
</p-button>
- app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`
:host ::ng-deep .p-cell-editing {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
`,
],
})
export class AppComponent {
tutorials: Tutorial[];
@ViewChild('dt') table: Table;
clonedTutorials: { [s: string]: Tutorial } = {};
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Queue',
category: 'Data Structure',
rating: 8,
},
{
title: 'Circularly LinkedList',
category: 'Data Structure',
rating: 1,
},
{
title: 'Doubly LinkedList',
category: 'Data Structure',
rating: 3,
},
{
title: 'Singly LinkedList',
category: 'Data Structure',
rating: 5,
},
{
title: 'Doubly Ended Queue',
category: 'Data Structure',
rating: 10,
},
{
title: 'Binary Search Tree',
category: 'Data Structure',
rating: 2,
},
{
title: 'Red Black Tree',
category: 'Data Structure',
rating: 9,
},
{
title: 'Breadth First Search',
category: 'Graph',
rating: 6,
},
{
title: "Floyd's Cycle",
category: 'Algorithm',
rating: 7,
},
{
title: 'Travelling Salesman Problem',
category: 'Algorithm',
rating: 4,
},
{
title: 'Bellman Ford',
category: 'Graph',
rating: 8,
},
{
title: 'KMP Algorithm',
category: 'String',
rating: 10,
},
];
this.primengConfig.ripple = true;
}
handleClick() {
this.tutorials.push({
title: 'Djikstra Shortest Path',
category: 'Graph',
rating: 5,
});
}
updateView() {
this.tutorials = [...this.tutorials];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
- app.module.ts
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 { MultiSelectModule } from 'primeng/multiselect';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
MultiSelectModule,
ButtonModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在下面的例子中，我们用新数据修改了表数据。
- app.component.html
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Table Change Detection</h3>
<h5>Basic</h5>
<p-table #dt [value]="tutorials"
dataKey="title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="0"
[globalFilterFields]="['title', 'category', 'rating']">
<ng-template pTemplate="caption">
<div class="table-header">
List of Tutorials
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text"
(input)=
"dt.filterGlobal($event.target.value, 'contains')"
placeholder="Global Search" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="title">
Title
<p-sortIcon field="title"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category
<p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="rating">
Rating
<p-sortIcon field="rating"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-tutorial>
<tr class="p-selectable-row">
<td>
<p-tableCheckbox [value]="tutorial"></p-tableCheckbox>
</td>
<td>
<span class="p-column-title"> Title </span>
{{ tutorial.title }}
</td>
<td>
<span class="p-column-title"> Category </span>
<span class="image-text">
{{ tutorial.category }}
</span>
</td>
<td>
<span class="p-column-title"> Rating </span>
<span class="image-text">
{{ tutorial.rating }}
</span>
</td>
</tr>
</ng-template>
</p-table>
<p-button label="Update Table"
(onClick)="updateView()">
</p-button>
- app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`
:host ::ng-deep .p-cell-editing {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
`,
],
})
export class AppComponent {
tutorials: Tutorial[];
@ViewChild('dt') table: Table;
clonedTutorials: { [s: string]: Tutorial } = {};
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Queue',
category: 'Data Structure',
rating: 8,
},
{
title: 'Circularly LinkedList',
category: 'Data Structure',
rating: 1,
},
{
title: 'Doubly LinkedList',
category: 'Data Structure',
rating: 3,
},
{
title: 'Singly LinkedList',
category: 'Data Structure',
rating: 5,
},
{
title: 'Doubly Ended Queue',
category: 'Data Structure',
rating: 10,
},
{
title: 'Binary Search Tree',
category: 'Data Structure',
rating: 2,
},
{
title: 'Red Black Tree',
category: 'Data Structure',
rating: 9,
},
{
title: 'Breadth First Search',
category: 'Graph',
rating: 6,
},
{
title: "Floyd's Cycle",
category: 'Algorithm',
rating: 7,
},
{
title: 'Travelling Salesman Problem',
category: 'Algorithm',
rating: 4,
},
{
title: 'Bellman Ford',
category: 'Graph',
rating: 8,
},
{
title: 'KMP Algorithm',
category: 'String',
rating: 10,
},
];
this.primengConfig.ripple = true;
}
updateView() {
this.tutorials = [
{
title: 'Queue',
category: 'Data Structure',
rating: 8,
},
{
title: 'Circularly LinkedList',
category: 'Data Structure',
rating: 1,
},
{
title: 'Doubly LinkedList',
category: 'Data Structure',
rating: 3,
},
{
title: 'Singly LinkedList',
category: 'Data Structure',
rating: 5,
},
{
title: 'Doubly Ended Queue',
category: 'Data Structure',
rating: 10,
},
{
title: 'Binary Search Tree',
category: 'Data Structure',
rating: 2,
},
{
title: 'Red Black Tree',
category: 'Data Structure',
rating: 9,
},
{
title: 'Breadth First Search',
category: 'Graph',
rating: 6,
},
{
title: "Floyd's Cycle",
category: 'Algorithm',
rating: 7,
},
{
title: 'Travelling Salesman Problem',
category: 'Algorithm',
rating: 4,
},
{
title: 'Bellman Ford',
category: 'Graph',
rating: 8,
},
{
title: 'KMP Algorithm',
category: 'String',
rating: 10,
},
{
title: 'Djikstra Shortest Path',
category: 'Graph',
rating: 5,
},
];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
- app.module.ts
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 { MultiSelectModule } from 'primeng/multiselect';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
MultiSelectModule,
ButtonModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
