角度 6 多选下拉菜单答案

【问题标题】：angular 6 multiselect dropdown角度 6 多选下拉菜单
【发布时间】：2019-03-15 05:33:03
【问题描述】：

我想通过复选框选择角度 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>

【问题讨论】：

在添加 JSON 之类的内容时，请花几分钟时间思考如何让其他人更容易阅读。如果你还没有找到它们，网上有很多 JSON 格式化程序/美化器

标签： api angular6 multi-select

【解决方案1】：

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',

【讨论】：

【解决方案2】：

<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);

}

根据您的要求更改名称

【讨论】：