0
364
ViewsNg multiselect dropdown showing options as blank?
I'm trying to implement a basic multiselect dropdown to my project. My code is the following:
HTML
<ng-multiselect-dropdown [settings]="searchSettings" [data]="dummyList" multiple>
</ng-multiselect-dropdown>
TS
dummyList = [
{ item_id: 1, item_text: 'Mumbai' },
{ item_id: 2, item_text: 'Bangaluru' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
]
searchSettings: TslMultiSelectSettings = {
enableSearchFilter: true,
noDataLabel: 'Search For status',
labelKey: 'status',
primaryKey: 'status'
}
This successfully creates the dropdown with the correct amount of items. But it is showing up blank and I can't figure out why. See image:
When I inspect the element in devtools I can see that the names are the options are there too:
What am I doing that is making the text not appear and how can I fix?
1 answers
Answer question0
Check the docs, the format is: { id: number|string, text: string }.
Update
I'm not even sure if you're using the same library as the one I linked. But if you are, you can use it like this:
dummyList = [
{ id: 1, text: 'Mumbai' },
{ id: 2, text: 'Bangaluru' },
{ id: 3, text: 'Pune' },
{ id: 4, text: 'Navsari' },
{ id: 5, text: 'New Delhi' }
]
<ng-multiselect-dropdown [data]="dummyList"></ng-multiselect-dropdown>
I have no idea where you are getting the following interface from, it doesn't match the library I'm referring to at the start of the answer, please confirm which npm library you are using.
searchSettings: TslMultiSelectSettings = {
enableSearchFilter: true,
noDataLabel: 'Search For status',
labelKey: 'status',
primaryKey: 'status'
}