我想通过复选框选择角度 6 中的多个值。 在这里,我在下拉列表中选择部门,与该部门相关的员工列在另一个带有复选框的下拉列表中。这是这个过程,但实际上数组的最后一个值仅显示在下拉列表中,我使用 ng-multiselect-dropdown 来选择多个值
{
"content":[
{
"userid":6,
"firstName":"Anns Jarigo",
"lastName":"PaulRaj",
"jobTitle":"JAVA_DEVELOPER",
"position":"TEAM_MEMBER",
"mode_of_employement":"Direct",
"phoneNumber":"9087881162",
"date_of_joining":"24-02-2018",
"reportManager":"[email protected]",
"image":"anns.jpg",
"userRole":"EMPLOYEE",
"appUser":6,
"department":"JAVA"
},
{
"userid":7,
"firstName":"Amanullah",
"lastName":"H",
"jobTitle":"JAVA_DEVELOPER",
"position":"TEAM_MEMBER",
"mode_of_employement":"Direct",
"phoneNumber":"9087881162",
"date_of_joining":"14-02-2018",
"reportManager":"[email protected]",
"image":"aman.jpg",
"userRole":"EMPLOYEE",
"appUser":7,
"department":"JAVA"
},
{
"userid":8,
"firstName":"Raj Prabhu",
"lastName":"A",
"jobTitle":"JAVA_DEVELOPER",
"position":"TEAM_MEMBER",
"mode_of_employement":"Direct",
"phoneNumber":"9087881162",
"date_of_joining":"26-07-2018",
"reportManager":"[email protected]",
"image":"raj.jpg",
"userRole":"EMPLOYEE",
"appUser":8,
"department":"JAVA"
},
{
"userid":13,
"firstName":"Subashri",
"lastName":"P",
"jobTitle":"JAVA_TRAINEE",
"position":"INTERN",
"mode_of_employement":"Direct",
"phoneNumber":"9087881162",
"date_of_joining":"17-08-2018",
"reportManager":"[email protected]",
"image":"subashri.jpg",
"userRole":"INTERN",
"appUser":13,
"department":"JAVA"
}
],
"status":"Success!"
}
Component.ts
getEmployees(deviceValue: String){
this.service.getEmployee(deviceValue).subscribe(response=>
{
this.employees=response.content;
for(let i = 0 ; i < this.employees.length; i++){
this.test= this.employees[i].firstName;
console.log(this.test+" test name")
this.testId = this.employees[i].userid;
this.dropdownList=[
{ item_id : this.testId , item_text: this.test}
]
}
this.dropdownSettings = {
singleSelection: false,
idField:'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
HTML:
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>
`
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(click)="onCheck("give your selected details here",$event)"
>
</ng-multiselect-dropdown>
在你的 component.ts 中
categoryserviceList: Array<Int32Array> = [];
onCheck(service: any, event) {
console.log(service, event, "Selected");
if (event.target.checked) {
this.categoryserviceList.push(service);
} else if (!event.target.checked) {
let index = this.categoryserviceList.indexOf(service);
this.categoryserviceList.splice(index, 1);
}
console.log(this.categoryserviceList);
}
根据您的要求更改名称
this.dropdownSettings = {
singleSelection: false,
idField:'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
在此处更改属性名称,而不是您添加的额外 for 循环代码。
idField:'testId ',
textField: 'test',