在Primeng orderlist中使用drag n drop对元素重新排序后,可以通过以下步骤来获取新的修改后的索引:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
items: any[] = [
{ label: 'Item 1' },
{ label: 'Item 2' },
{ label: 'Item 3' },
{ label: 'Item 4' }
];
newIndex: number;
// 其他代码...
}
<p-orderList [value]="items" dragdrop="true" (onListChange)="updateIndexes($event)">
<ng-template let-item pTemplate="item">
<div class="ui-helper-clearfix">
{{item.label}}
</div>
</ng-template>
</p-orderList>
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
items: any[] = [
{ label: 'Item 1' },
{ label: 'Item 2' },
{ label: 'Item 3' },
{ label: 'Item 4' }
];
newIndex: number;
updateIndexes(event: any) {
this.items = event.list; // 更新排序后的元素数组
this.newIndex = event.dropIndex; // 获取新的索引
}
// 其他代码...
}
至于Primeng orderlist组件的更多详细信息和用法,你可以访问腾讯云的Primeng产品文档,链接地址为:Primeng产品文档。
希望以上内容能帮助到你!
领取专属 10元无门槛券
手把手带您无忧上云