Angular PrimeNG OrderList 组件

Angular PrimeNG OrderList 是一个基于 Angular 平台的开源组件库，OrderList 组件提供了一种轻松管理列表元素顺序的解决方案。使用 OrderList 组件，程序员可以快速定制管理活动选择项的 UI，并可以通过简单地拖放来重新排列已选择的项。本文将详细介绍 Angular PrimeNG OrderList 组件的主要功能及其使用方法。

主要功能

• 管理列表元素排序：OrderList 组件可以轻松地实现对列表元素的排序与重排。
• 通过拖放实现元素排序：OrderList 组件支持通过拖放实现元素排序，这是一种高效、可靠的交互操作方式。
• 支持多个子级列表：OrderList 组件支持多个子级列表管理，可以有效地组织复杂的数据结构。
• 可定制性强：OrderList 组件提供了许多可定制的选项和样式，方便程序员根据实际需求进行自定义。

如何使用

步骤 1：安装

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

步骤 2：引入 OrderListModule 模块

import { OrderListModule } from 'primeng/orderlist';

@NgModule({
  imports: [
    ...
    OrderListModule
    ...
  ]
})
export class AppModule { }

步骤 3：在组件中使用 OrderList

<p-orderList [value]="cars" [(ngModel)]="selectedCars"></p-orderList>

export class CarComponent {
  cars: Car[];
  selectedCars: Car[];

  constructor(private carService: CarService) {}

  ngOnInit() {
    this.carService.getCars().then(cars => this.cars = cars);
  }
}

API 与样式

详细的 API 及样式说明请参考官方文档：https://www.primefaces.org/primeng/showcase/#/orderlist