api - 角度 6 多选下拉菜单
问题描述
我想通过复选框选择角度 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":"sampath.m@binary2quantum.com",
"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":"sampath.m@binary2quantum.com",
"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":"sampath.m@binary2quantum.com",
"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":"sampath.m@binary2quantum.com",
"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);
}
根据您的要求更改名称
推荐阅读
- mysql - Laravel - 在数据库中保存或插入图像数组 - Laravel
- python - 如何在应用合并熊猫之前抛出类型错误
- spring - Mockito:等待存根完成
- python - 我正在寻找一种使用带有 python 的正则表达式从文本中提取工作编号的方法
- numpy - 加速矩阵求逆
- sql - 查看任何定义、查看服务器状态的风险
- linux - 从 curl 命令控制台输出一些模式文件的 grep 并将它们复制到一个目录
- python - 将我的离线绘图保存为本地 html 文件
- vector - 如何将元素添加到将字符串与字符串向量配对的哈希映射的值中?
- fortran - 在 Fortran FMZM 多精度库中使用 IM_FORM 显示任意长度的格式化字符串