angular - 从 Angular 中的 PrimeNG PickList 中删除按钮
解决方案
PrimeNg 没有删除按钮的选项。但是我们可以用列表框来做到这一点。
第 1 步:在 app.module.ts 中导入 ListboxModule
import {ListboxModule} from 'primeng/listbox';
...
imports: [
ListboxModule
...
],
第 2 步:app.component.html
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<p-listbox [options]="users" filter="filter" multiple="true" checkbox="true"
[style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
[(ngModel)]="selectedUserList"></p-listbox>
</div>
<div class="col-md-2">
<div class="my-2 ml-3"><i class="pi pi-angle-double-right clickable"
(click)="moveUserToGroupMember()"></i></div>
<div class="my-2 ml-3"><i class="pi pi-angle-double-left clickable"
(click)="moveGroupToUser()"></i></div>
</div>
<div class="col-md-3">
<p-listbox [options]="groupUserList" filter="filter" multiple="true" checkbox="true"
[style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
[(ngModel)]="selectedGroupUsersList"></p-listbox>
</div>
</div>
第 3 步:app.component.ts 文件具有手动功能的选择列表
export class AppComponent {
public users = [];
public groupUserList = [];
public selectedUserList:any;
public selectedGroupUsersList:any;
constructor AppComponent(){
this.users = [
{ label: 'Ganesh', value: '3' },
{ label: 'John', value: '1' },
{ label: 'Joshua', value: '2' },
];
this.groupUserList = [
{ label: 'Vetri', value: '5' },
{ label: 'shiva', value: '6' },
];
};
moveUserToGroupMember() {
this.users.forEach((elem, index) => {
this.selectedUserList.forEach((selUser, indexes) => {
if (selUser === elem.value) {
this.groupUserList.push(elem);
setTimeout(() => {
this.removeByAttr(this.users, 'value', selUser);
}, 500);
}
});
});
}
moveGroupToUser() {
this.groupUserList.forEach((elem, index) => {
this.selectedGroupUsersList.forEach((selUser, indexes) => {
if (selUser === elem.value) {
this.users.unshift(elem);
setTimeout(() => {
this.removeByAttr(this.groupUserList, 'value', selUser);
}, 500);
}
});
});
}
removeByAttr = (arr, attr, value) => {
let i = arr.length;
while (i--) {
if (arr[i]
&& arr[i].hasOwnProperty(attr)
&& (this.users.length > 0 && arr[i][attr] === value)) {
arr.splice(i, 1);
}
}
return arr;
}
}
您可以从 selectedUserList:any 和 selectedGroupUserList:any 中获取选定的用户。就是这样,您现在可以将用户从一个列表移动到另一个列表。
更多参考:
推荐阅读
- node.js - 有没有办法从我的 Node.js 生成的 shell 标准输出文本中挽救这些损坏的 bash 转义序列工件?
- python - TypeError 浮点对象不能解释为整数
- typescript - 在某些情况下,Firebase 可调用云函数在没有 Promise 的情况下返回 void
- typescript - 要求每个“foo”对应 tslint 中的“bar”?
- java - Flutter:如果 Stream 是 Bloc 状态的一部分,如何将 StreamBuilder 与 BlocBuilder 一起使用?
- sql - 如何插入新列,其值来自另一个表?
- python - 忽略鼠标在 QGraphicsObject 上的拖动
- r - 有没有办法在 R 中有更好的缓冲区边界?
- r - 在指定分位数后添加箱线图异常值
- flutter - 在一个选项卡上按下按钮,导航到另一个选项卡,发送数据,并在另一个选项卡中调用函数