我想在多选下拉菜单上打印"选择的5个项目"。我在这里附上一张多选下拉列表的图片。我使用了angular2多选下拉npm包。
https://i.stack.imgur.com/Zqo4e.png
这是我的html代码：
<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings"
(onSelect)="onItemSelect($event)" (onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
</angular2-multiselect>
这是我的配置设置。
this.settings = {
text: "Select Skills",
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
badgeShowLimit: 2,
};
这样试试。它在工作组件.html
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
所选项目数：｛｛selectedItems.length｝｝
｛｛item.itemName｝｝组件.ts
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
this.dropdownList = [
{"id":1,"itemName":"India"},
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"},
{"id":6,"itemName":"Germany"},
{"id":7,"itemName":"France"},
{"id":8,"itemName":"Russia"},
{"id":9,"itemName":"Italy"},
{"id":10,"itemName":"Sweden"}
];
this.selectedItems = [
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"}
];
this.dropdownSettings = {
singleSelection: false,
text:"Select Countries",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class"
};
}
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}
stackblitz URL:[https://stackblitz.com/edit/angular2-multiselect-dropdown][1]
selectAllText: string = 'Select All' //we can add here count
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
this.dropdownSettings.selectAllText = 'Select All' + this.selectedItems.length
}
计数将附加"全选"文本。
尝试以下方式
selectedItems: any = [
{ "id": 1, "itemName": "opt1" },
{ "id": 2, "itemName": "opt2" },
{ "id": 3, "itemName": "opt3" },
{ "id": 4, "itemName": "opt4" },
angular.json
"styles": [
"node_modules/angular2-multiselect-dropdown/themes/default.theme.css",
]