极客教程Angular PrimeNG表列分组
Angular PrimeNG是一个使用Angular制作Web应用程序的UI工具包。它由数百个预置组件组成，使开发人员能够在更短的时间内轻松创建一个漂亮的、响应式的网络解决方案。在这篇文章中，我们将看到Angular PrimeNG表列分组。
表组件是用来以表格形式显示一些数据的。表格的列可以通过使用<td>模板中<td>元素的rowspan和colspan CSS属性进行分组<td>。
语法:
<p-table [value]="..." responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th **rowspan="2"** >Company</th>
<th **colspan="2"** >Sales</th>
</tr>
<tr>
<th>This Year</th>
<th>Last Year</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-company>
<tr>
<td>{{company.name}}</td>
<td>{{company.thisYearSales}}</td>
<td>{{company.lastYearSales}}</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
示例1：本例展示了使用rowspan和colspan属性对表的销售列进行分组。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Column Grouping</h4>
<p-table [value]="companyProfiles"
responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th rowspan="2">Company</th>
<th colspan="2">Sales</th>
</tr>
<tr>
<th>This Year</th>
<th>Last Year</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-company
let-rowData
let-x="rowIndex">
<tr>
<td>{{company.name}}</td>
<td>{{company.thisYearSales}}</td>
<td>{{company.lastYearSales}}</td>
</tr>
</ng-template>
<ng-template pTemplate="footer">
<tr>
<td colspan="3">
This is just demo data for example
</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface CompanyProfile {
name: String;
thisYearSales: String;
lastYearSales: String;
thisYearGrowth: String;
lastYearGrowth: String;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
companyProfiles: CompanyProfile[] = [];
ngOnInit() {
this.companyProfiles = [
{
name: "Apple",
thisYearSales: "2,000,000,000",
lastYearSales: " 1,700,000,000",
thisYearGrowth: "21%",
lastYearGrowth: "15%",
},
{
name: "Google",
thisYearSales: "1,800,000,000",
lastYearSales: " 1,500,000,000",
thisYearGrowth: "15%",
lastYearGrowth: "13%",
},
{
name: "Meta",
thisYearSales: "1,100,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "11%",
lastYearGrowth: "12%",
},
{
name: "Tesla",
thisYearSales: "1,300,000,000",
lastYearSales: " 900,000,000",
thisYearGrowth: "23%",
lastYearGrowth: "16%",
},
{
name: "Twitter",
thisYearSales: "1,200,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "19%",
lastYearGrowth: "18%",
}
];
}
}
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';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：这里还有一个例子来理解rowspan和colspan属性的使用。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Column Grouping</h4>
<p-table [value]="companyProfiles"
responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Company</th>
<th>Data</th>
</tr>
<tr>
<th colspan="2">Sales</th>
<th colspan="2">Growth</th>
</tr>
<tr>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-company
let-rowData
let-x="rowIndex">
<tr>
<td>{{company.name}}</td>
<td>{{company.thisYearSales}}</td>
<td>{{company.lastYearSales}}</td>
<td>{{company.thisYearGrowth}}</td>
<td>{{company.lastYearGrowth}}</td>
</tr>
</ng-template>
<ng-template pTemplate="footer">
<tr>
<td colspan="3">
This is just demo data for example
</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface CompanyProfile {
name: String;
thisYearSales: String;
lastYearSales: String;
thisYearGrowth: String;
lastYearGrowth: String;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
companyProfiles: CompanyProfile[] = [];
ngOnInit() {
this.companyProfiles = [
{
name: "Apple",
thisYearSales: "2,000,000,000",
lastYearSales: " 1,700,000,000",
thisYearGrowth: "21%",
lastYearGrowth: "15%",
},
{
name: "Google",
thisYearSales: "1,800,000,000",
lastYearSales: " 1,500,000,000",
thisYearGrowth: "15%",
lastYearGrowth: "13%",
},
{
name: "Meta",
thisYearSales: "1,100,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "11%",
lastYearGrowth: "12%",
},
{
name: "Tesla",
thisYearSales: "1,300,000,000",
lastYearSales: " 900,000,000",
thisYearGrowth: "23%",
lastYearGrowth: "16%",
},
{
name: "Twitter",
thisYearSales: "1,200,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "19%",
lastYearGrowth: "18%",
}
];
}
}
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';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
