![中删除按钮]( "中删除按钮")
本文介绍了从 Angular 的 PrimeNG PickList 中删除按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下图中，我希望只有单项选择按钮并删除全选按钮(用黑色气泡标记).
我正在使用 PrimeNG Picklist 来生成列表.
有人可以帮我吗?
解决方案
PrimeNg 没有删除按钮的选项.但是我们可以用列表框来做到这一点.
第 1 步:在 app.module.ts 中导入 ListboxModule
import {ListboxModule} from 'primeng/listbox';...进口:[列表框模块...],
第 2 步:app.component.html
<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 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 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>
第 3 步:app.component.ts 文件，具有选择列表的手动功能
导出类 AppComponent {公共用户 = [];公共组用户列表 = [];公共选择的用户列表:任意；公共selectedGroupUsersList:any;构造函数 AppComponent(){this.users = [{标签:'Ganesh'，值:'3'}，{标签:'约翰'，值:'1'}，{标签:'约书亚'，值:'2'}，];this.groupUserList = [{标签:'Vetri'，值:'5'}，{标签:'湿婆'，值:'6'}，];};moveUserToGroupMember() {this.users.forEach((elem, index) => {this.selectedUserList.forEach((selUser, index) => {如果(selUser === elem.value){this.groupUserList.push(elem);setTimeout(() => {this.removeByAttr(this.users, 'value', selUser);}, 500);}});});}移动组到用户(){this.groupUserList.forEach((elem, index) => {this.selectedGroupUsersList.forEach((selUser, index) => {如果(selUser === elem.value){this.users.unshift(elem);setTimeout(() => {this.removeByAttr(this.groupUserList, 'value', selUser);}, 500);}});});}removeByAttr = (arr, attr, value) =>{让我 = arr.length;当我 - ) {如果 (arr[i]&&arr[i].hasOwnProperty(attr)&&(this.users.length > 0 && arr[i][attr] === 值)) {arr.splice(i, 1);}}返回 arr;}}
您可以从 selectedUserList:any 和 selectedGroupUserList:any 中获取选定用户.就是这样，您现在可以将用户从一个列表移动到另一个列表.
更多参考:
helperscript.com
演示图片
In the following image, I would like to have only single-item selection buttons and remove the select all buttons (marked by the black bubbles).
I am using PrimeNG Picklist to generate the list.
Could anyone help me?
解决方案
PrimeNg have no option to remove buttons. But we can do it with listbox.
step 1:Import ListboxModule in app.module.ts
import {ListboxModule} from 'primeng/listbox';
...
imports: [
ListboxModule
...
],
Step 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>
Step 3: app.component.ts file with manual functionality of picklist
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;
}
}
You can get selected Users from selectedUserList:any and selectedGroupUserList:any. That’s it now you can able to move users from one list to another list.
For More Reference :
helperscript.com
Demo image
这篇关于从 Angular 的 PrimeNG PickList 中删除按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！