极客教程Angular PrimeNG表单元格编辑
Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来做伟大的造型，这个框架用来做响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG表单元格的编辑。
表组件用于以表格的形式向用户显示一些数据。表格中的单元格编辑可以通过向具有输入-输出模板的p-cellEditor组件的单元格添加pEditableColumn指令来实现。
语法:
<p-table [value]="books" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
...
</tr>
</ng-template>
<ng-template pTemplate="body"
let-book
let-rowData
let-x="rowIndex">
<tr>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
type="text"
[(ngModel)]="rowData.name">
</ng-template>
<ng-template pTemplate="output">
{{rowData.name}}
</ng-template>
</p-cellEditor>
</td>
...
</tr>
</ng-template>
</p-table>
创建Angular应用程序并安装模块：。
第1步：使用以下命令创建一个Angular应用程序。
ng new myapp
第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。
cd myapp
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：完成上述步骤后，项目结构将如下所示。
Project Structure
运行应用程序：
ng serve --open
例子1：这个例子显示了如何在一个简单的表格中启用单元格编辑。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Cell Editing</h4>
<p-table [value]="books" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Author</th>
<th>Year</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-book let-rowData>
<tr>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
type="text"
[(ngModel)]="rowData.name">
</ng-template>
<ng-template pTemplate="output">
{{rowData.name}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
type="text"
[(ngModel)]="rowData.author">
</ng-template>
<ng-template pTemplate="output">
{{rowData.author}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
type="number"
[(ngModel)]="rowData.year">
</ng-template>
<ng-template pTemplate="output">
{{rowData.year}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface Book {
name: String,
author: String,
year: Number
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
books: Book[] = [];
ngOnInit() {
this.books = [
{
name: "Clean Code",
author: "Robert Cecil Martin",
year: 2008
},
{
name: "Introduction to Algorithms",
author: "Thomas H Corman",
year: 1989
},
{
name: "Refactoring",
author: "Martin Fowler",
year: 1999
},
{
name: "Code Complete",
author: "Steve McConnell",
year: 1993
},
{
name: "Programming Pearls",
author: "John Bentley",
year: 1986
},
{
name: "The Clean Coder",
author: "Robert Cecil Martin",
year: 2011
},
{
name: "Coders at Work",
author: "Peter Seibel",
year: 2009
},
{
name: "Effective Java",
author: "Joshua Bloch",
year: 2001
},
{
name: "Head First Java",
author: "Bert Bates",
year: 2003
}
];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
InputTextModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在这个例子中，我们在一个带状表格中启用了单元格编辑。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Cell Editing</h4>
<p-table [value]="books" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Author</th>
<th>Year</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-book
let-rowData
let-x="rowIndex">
<tr [ngClass]="{'even' : x%2 == 0}">
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
type="text"
[(ngModel)]="rowData.name">
</ng-template>
<ng-template pTemplate="output">
{{rowData.name}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
type="text"
[(ngModel)]="rowData.author">
</ng-template>
<ng-template pTemplate="output">
{{rowData.author}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
type="number"
[(ngModel)]="rowData.year">
</ng-template>
<ng-template pTemplate="output">
{{rowData.year}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface Book {
name: String,
author: String,
year: Number
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`
tr.even{
background-color: green;
color: white;
}
`
]
})
export class AppComponent {
books: Book[] = [];
ngOnInit() {
this.books = [
{
name: "Clean Code",
author: "Robert Cecil Martin",
year: 2008
},
{
name: "Introduction to Algorithms",
author: "Thomas H Corman",
year: 1989
},
{
name: "Refactoring",
author: "Martin Fowler",
year: 1999
},
{
name: "Code Complete",
author: "Steve McConnell",
year: 1993
},
{
name: "Programming Pearls",
author: "John Bentley",
year: 1986
},
{
name: "The Clean Coder",
author: "Robert Cecil Martin",
year: 2011
},
{
name: "Coders at Work",
author: "Peter Seibel",
year: 2009
},
{
name: "Effective Java",
author: "Joshua Bloch",
year: 2001
},
{
name: "Head First Java",
author: "Bert Bates",
year: 2003
}
];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
InputTextModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
