Angular PrimeNG 是一个用于构建 Angular Web 应用程序的 UI 工具包。它拥有数百个预构建组件，使开发者能够在更短的时间内轻松创建美观且响应迅速的 Web 解决方案。在本文中，我们将探索 Angular PrimeNG Table 的列重排序功能。
表格组件 用于以表格形式显示数据。通过将表格的 reorderableColumns 属性设置为 true，并在可重排序的列上设置 pReorderableColumn 指令，我们可以通过拖放操作对表格的列进行重新排序。为了使列重排序功能正常工作，列必须是动态的。我们可以将动态列的 pReorderableColumnDisabled 属性设置为 true，从而禁用特定列的重排序功能。
语法：
{{column.name}}
{{company.sector}}
{{company.name}}
....
创建 Angular 应用并安装模块：
第 1 步： 使用以下命令创建一个 Angular 应用程序。
ng new myapp
第 2 步： 创建项目文件夹（即 myapp）后，使用以下命令进入该文件夹。
cd myapp
第 3 步： 在指定目录中安装 PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构： 完成上述步骤后，项目结构将如下所示。
!imageProject Structure
示例 1： 本示例说明了如何使用 pReorderableColumn 指令在表格中启用列重排序。
app.component.html
CODEBLOCK_c6a474be
app.component.ts
import { Component } from ‘@angular/core‘;
interface CompanyProfile {
name: String;
sector: String;
thisYearSales: String;
lastYearSales: String;
thisYearGrowth: String;
lastYearGrowth: String;
}
@Component({
selector: ‘app-root‘,
templateUrl: ‘./app.component.html‘,
})
export class AppComponent {
companyProfiles: CompanyProfile[] = [];
columns: any[] = [
{
name: "Sector",
field: "sector"
},
{
name: "Company",
field: "name",
},
{
name: "This Year Sales",
field: "thisYearSales"
},
{
name: "Last Year Sales",
field: "lastYearSales"
},
];
ngOnInit() {
this.companyProfiles = [
{
name: "Apple",
sector: "Technology",
thisYearSales: "$ 2,000,000,000",
lastYearSales: "$ 1,700,000,000",
thisYearGrowth: "21%",
lastYearGrowth: "15%",
},
{
name: "Mac Donalds",
sector: "Food",
thisYearSales: "$ 1,100,000,000",
lastYearSales: "$ 800,000,000",
thisYearGrowth: "18%",
lastYearGrowth: "15%",
},
{
name: "Google",
sector: "Technology",
thisYearSales: "$ 1,800,000,000",
lastYearSales: "$ 1,500,000,000",
thisYearGrowth: "15%",
lastYearGrowth: "13%",
},
{
name: "Domino‘s",
sector: "Food",
thisYearSales: "$ 1,000,000,000",
lastYearSales: "$ 800,000,000",
thisYearGrowth: "13%",
lastYearGrowth: "14%",
},
{