Как отобразить счетчик выбранных флажков в Angular2-multiselect? - PullRequest
Новая
       51

Как отобразить счетчик выбранных флажков в Angular2-multiselect?

0 голосов
/ 17 марта 2020

Я хочу напечатать эти 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,   
    };

Ответы [ 3 ]

0 голосов
/ 17 марта 2020

Попробуй вот так. это работает Компонент. 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}}

{{item.itemName}}

Component.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);
    }

URL-адрес стекаблика: [https://stackblitz.com/edit/angular2-multiselect-dropdown] [1]

0 голосов
/ 17 марта 2020 
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
}

к количеству добавляется текст «Выделить все».

0 голосов
/ 17 марта 2020

Попробуй по-другому 

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