Angular PrimeNG OrderList组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式的网站非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用OrderList组件。我们还将学习属性、事件和样式，以及在代码示例中使用的语法。

OrderList组件：它用于维护项目和产品的列表。

属性:

value : 它是一个要重新排序的对象的数组。它接受数组数据类型，默认值为空。
selection : 它是一个对象的数组，用于绑定选择项。它接受数组数据类型，默认值为空。
header:它是标题的文本。它的数据类型为字符串，默认值为空。
style : 它是组件的内联样式。它的数据类型为字符串，默认值为空。
styleClass : 它是组件的风格类。它的数据类型为字符串，默认值为空。
listStyle : 它是一个列表元素的内联样式。它的数据类型为字符串，默认值为空。
filterBy :它用于指定是否显示一个输入字段来过滤按键时的项目，并决定搜索哪些字段。它是字符串数据类型，默认值为空。
filterMatchMode 。它是用来定义如何过滤项目的。它是字符串数据类型，默认值是包含。
filterLocale : 它被用来设置在过滤中使用的语言环境。它是字符串数据类型，默认值为未定义。
metaKeySelection : 它用于指定是否需要按下metaKey来选择或丢弃项目。它接受布尔数据类型，默认值为true。
dragdrop : 它用于指定是否启用基于拖放的重新排序。它接受布尔数据类型，默认值为false。
filterPlaceHolder :它是占位符文本。它的数据类型为字符串，默认值为空。
trackBy :这是一个通过委托给ngForTrackBy来优化dom操作的函数。它属于函数类型，默认值为空。
controlsPosition : 它用于定义按钮相对于列表的位置，有效值是 “左 “或 “右”。它是字符串数据类型，默认值是左。
ariaFilterLabel : 它被用来定义一个字符串来标记过滤器的输入。它的数据类型为字符串，默认值为空。

事件:

onReorder :它是一个回调，当列表被重新排序时被触发。
onSelectionChange : 它是一个回调，当选择发生变化时调用。
onFilterEvent : 它是一个回调，当过滤发生时被触发。

样式:

p-orderlist。它是一个容器元素。
p-orderlist-list。它是一个列表容器。
p-orderlist-item。它是一个列表项。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

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

项目结构。它将看起来像以下。

Angular PrimeNG OrderList组件

例子1：这是一个基本的例子，说明了如何使用订单列表组件。

<h2>GeeksforGeeks</h2>
<p-orderList [value]="product" header="OrderList Component">
  <ng-template let-product pTemplate="item">
    <div class="product-item">
      <div class="product-list-detail">
        <h5 class="p-mb-2">{{product}}</h5>
        <h6 class="p-mb-2">{{gfg}}</h6>
      </div>
    </div>
  </ng-template>
</p-orderList>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  product: string[] = ['Geek1', 'Geek2', 'Geek3', 'Geek4'];
  
  gfg: string[] = ['200'];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { OrderListModule } from 'primeng/orderlist';
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            OrderListModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出:

Angular PrimeNG OrderList组件

例2：在这个例子中，我们将在OrderList组件中使用dragdrop属性。

<h2>GeeksforGeeks</h2>
<p-orderList [value]="product" 
    header="OrderList Component" 
    dragdrop="true">
  <ng-template let-product pTemplate="item">
    <div class="product-item">
      <div class="product-list-detail">
        <h5 class="p-mb-2">{{product}}</h5>
        <h6 class="p-mb-2">{{gfg}}</h6>
      </div>
    </div>
  </ng-template>
</p-orderList>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  product: string[] = ['Geek1', 'Geek2', 'Geek3', 'Geek4'];
  
  gfg: string[] = ['200'];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { OrderListModule } from 'primeng/orderlist';
  
@NgModule({
  imports: [BrowserModule,
              BrowserAnimationsModule, 
            OrderListModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出:

Angular PrimeNG OrderList组件