CODEWITHSUNDEEP
angularselectdropdownmulti-select
abhy
abhy

Reputation: 241

angular2-multiselect-dropdown shows empty list

I am using angular2-multiselect-dropdown but the dropdown is empty.

Following is the data in ts file:

this.list = [
{
   "docid":1,
   "value": "Europe"
},
{
   "docid":2,
   "value": "ASIA"
},
{
   "docid":3,
   "value": "AFRICA"
},
{
   "docid":4,
   "value": "LATIN AMERICA"
},
{
   "docid":5,
   "value": "NORTH AMERICA"
}

]

In HTML :

<angular2-multiselect [data]="List" [(ngModel)]="selectedItems" 
        (onSelect)="onItemSelect($event)" 
        (onDeSelect)="OnItemDeSelect($event)"
        (onSelectAll)="onSelectAll($event)"
        (onDeSelectAll)="onDeSelectAll($event)">
      </angular2-multiselect>

In examples, he is using {"id":9,"itemName":"Italy"} which works well. So is there any way that the field itemName can be configured.

https://github.com/CuppaLabs/angular2-multiselect-dropdown https://cuppalabs.github.io/angular2-multiselect-dropdown/#/basic

Upvotes: 1

Views: 3609

Answers (3)

shashi
shashi

Reputation: 1

Add below attribute to angular2-multiselect HTML tag. [settings]="dropdownSettings"

And configure labelKey as below dropdownSettings.labelKey = 'value' instead of itemName which is default;

Upvotes: 0

nipuna-g
nipuna-g

Reputation: 6652

The component is expecting the [data] property to be populated in a certain shape. In this case, it should be as follows: 

export class ListItem{
    id: Number;
    itemName: String
}

You will have to transform your list before setting it as the input to data.

You can use map to get this done. 

this.list = this.list.map((item) => {
  return {
    id: item.docId,
    itemName: item.value
  }
})

Upvotes: 1

Aleksei Korkoza
Aleksei Korkoza

Reputation: 447

Maybe, I found an error in your code. 

<angular2-multiselect [data]="list" [(ngModel)]="selectedItems" 
        (onSelect)="onItemSelect($event)" 
        (onDeSelect)="OnItemDeSelect($event)"
        (onSelectAll)="onSelectAll($event)"
        (onDeSelectAll)="onDeSelectAll($event)">
      </angular2-multiselect>

Instead of [data]="List" you need to write [data]="list".

Then, add a method map as say in comment above.

Upvotes: 1

Related Questions