angular2-multiselect-dropdown shows empty list

Question

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

Aleksei Korkoza · Accepted Answer · 2017-12-07 06:14:03Z

1

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.

answered Dec 7, 2017 at 6:14

Aleksei Korkoza

4657 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nipuna-g · Accepted Answer · 2017-12-07 06:37:19Z

1

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

edited Dec 7, 2017 at 6:37

answered Dec 7, 2017 at 6:15

nipuna-g

6,7023 gold badges33 silver badges54 bronze badges

1 Comment

abhy Over a year ago

Thanks for the help. I thought there must be some configuration to resolve this. For now, this looks like a good solution. It should be item['docId] and item['value']

shashi · Accepted Answer · 2018-07-25 07:53:38Z

0

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

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

answered Jul 25, 2018 at 7:53

shashi

12 bronze badges

Collectives™ on Stack Overflow

angular2-multiselect-dropdown shows empty list

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related