如何在Angular2-multiselect中显示选中的复选框计数？答案

【问题标题】：How to display selected checkbox count in Angular2-multiselect?如何在Angular2-multiselect中显示选中的复选框计数？
【发布时间】：2020-03-17 04:40:04
【问题描述】：

我想在多选下拉列表中打印“已选择的 5 个项目”。在这里，我附上了多选下拉菜单的图像。我使用了 angular2-multiselect 下拉 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,   
    };

【问题讨论】：

你在哪里显示这个标签？在下拉菜单中还是在它之外？
在下拉菜单中
它看起来像可用的 here -> Select with custom trigger text 但不在那个库中
你可以在 GitHub 上创建一个包含所有必要信息的问题，希望他们能帮助你，否则我提出 PR 需要 4-6 天时间
好吧，你能推荐另一个提供此功能的库吗？

标签： angular checkbox multi-select

【解决方案1】：

试试这样。这是工作组件.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 }}

组件.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 网址：[https://stackblitz.com/edit/angular2-multiselect-dropdown][1]

【讨论】：

嘿。谢谢你的时间。我想要像“3 个项目选择”这样的计数，而不是在下拉列表中选中标签。

【解决方案2】：

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
}

计数将附加全选文本。

【讨论】：

使用此代码得到的结果类似于全选 3。我想在下拉列表中选择 3 个项目标签

【解决方案3】：

尝试以下方式

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",
  ]

【讨论】：

是的，我在我的 ts 文件中采用了静态数组。我得到选定复选框的值。但是如何在 html 端显示？
把css放在angular.json "node_modules/angular2-multiselect-dropdown/themes/default.theme.css",
发布你的 angular.json 文件并分享 angular2-multiselect-dropdown 的插件版本。
"styles": [ "node_modules/angular2-multiselect-dropdown/themes/default.theme.css", "src/styles.css" ],
包版本：4.6.3