Question

<angular2-multiselect 
         [data]="dataList | OrderBy : 'clientName'" [(ngModel)]="selectedItems[dataList.clientId]" 
         [settings]="dropdownSettings" name="multiSelect"
        
         (onSelect)="onItemSelect($event, dataList.clientId)" 
         (onDeSelect)="OnItemDeSelect($event,dataList.clientId)"
         (onSelectAll)="onSelectAll($event)"
         (onDeSelectAll)="onDeSelectAll($event)" disabled>
    
  <c-item>
     <ng-template let-item="item">
       <label style="color: #333;min-width: 160px;">{{item.clientName}}- {{item.clientId}}</label>
     </ng-template>
</c-item> 

</angular2-multiselect>

dataList是来自后端的列表，但在dropDown中的复选框除外，它工作正常。我无法选择1个复选框，因为它也同时单击了1 cb，因此全部选中。

Answer 1

您可以通过“ ng-multiselect-dropdown”完成

安装：

npm install ng-multiselect-dropdown

然后将其包含在您的模块中（请参阅app.module.ts）：

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
// ...

@NgModule({
imports: [
NgMultiSelectDropDownModule.forRoot()
// ...
]
// ...
})
export class AppModule {}

用法

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit() {
this.dropdownList = [
  { item_id: 1, item_text: 'Mumbai' },
  { item_id: 2, item_text: 'Bangaluru' },
  { item_id: 3, item_text: 'Pune' },
  { item_id: 4, item_text: 'Navsari' },
  { item_id: 5, item_text: 'New Delhi' }
];
this.selectedItems = [
  { item_id: 3, item_text: 'Pune' },
  { item_id: 4, item_text: 'Navsari' }
];
this.dropdownSettings = {
  singleSelection: false,
  idField: 'item_id',
  textField: 'item_text',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};
}
onItemSelect(item: any) {
console.log(item);
}
onSelectAll(items: any) {
console.log(items);
}
}

HTML代码：

<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>

有关更多详细信息，请检查URL- https://www.npmjs.com/package/ng-multiselect-dropdown

Answer 2

u必须在设置中添加primaryKey，例如：

this.dropdownSettings = { 
                          singleSelection: false, 
                          text:"Select Countries",
                          selectAllText:'Select All',
                          unSelectAllText:'UnSelect All',
                          enableSearchFilter: true,
                          classes:"myclass custom-class",
                          **primaryKey**:**"your_identifier"**,
                        };

有关： https://github.com/CuppaLabs/angular2-multiselect-dropdown/issues/252

angular2-multiselect下拉列表会在单击1 checbkox时选择所有框

2 个答案: