Having trouble with the Ng multiselect dropdown displaying empty options?

I'm currently facing a challenge in adding a multiselect dropdown feature to my project. Below is the code I have been working on:

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

The dropdown is successfully generating with the correct number of items. However, it is appearing blank and I am unable to identify the reason behind this issue. Please refer to the image below for visual representation:

https://i.sstatic.net/IBFHA.png

Upon inspecting the element using devtools, I can confirm that the option names are present:

https://i.sstatic.net/I4aZO.png

I am seeking guidance on what might be causing the text not to display and how I could potentially resolve this problem.

javascripthtmlcssangulartypescript

Answer №1

Take a look at the documentation, which states the required format as: 

{ id: number|string, text: string }
.

Latest Update

If you are indeed using the same library I mentioned earlier, here's an example of how to use it:

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'm unsure where you found the following interface, as it doesn't match the library I initially referenced. Please clarify which npm package you are utilizing for this setup.

searchSettings: TslMultiSelectSettings = {
    enableSearchFilter: true,
    noDataLabel: 'Search For status',
    labelKey: 'status',
    primaryKey: 'status'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve a Play Scala variable in the $scope of an AngularJS application

After trying various methods recommended on StackOverflow, I am still struggling to retrieve a Play Scala variable within my Javascript $scope. The line of initialization in an HTML file is as follows: @(playVariable: String)(implicit request: play.api.mv ...

javascriptangularjsscalaplayframework-2.0

Issue with Bootstrap-vue pagination navigation not functioning correctly (unexpectedly refreshes upon clicking a page)

I recently updated my website's gallery pagination by following a helpful guide. However, I encountered a problem where clicking on a new page number refreshes the entire webpage, unlike the smooth transition shown in the tutorial. This is not the beh ...

javascriptjqueryvue.jspaginationbootstrap-vue

Sending Node.js array from endpoint to Javascript function

I am facing an issue with my HTML chart that is supposed to display an array from a JavaScript function called 'window.testDataArray'. Instead of using a sample array, I want to fetch the array data from a server endpoint. However, I am unsure ab ...

javascriptarraysnode.jsendpoint

In PHP, a boolean variable will not display on the webpage when echoed

I am facing an issue with my PHP code where certain variables are not being echoed properly in the generated JavaScript. The code is designed to check if specific values are assigned in the $_GET global array and assign default values if they are not prese ...

javascriptphpgetboolean

What is the best way to combine relative paths or create distinct identifiers for SVG files located within multiple layers of folders

I have a collection of icons exported from "Figma" organized in folders, and I'm using grunt-svgstore to create a sprite sheet. However, the result contains duplicated IDs even after trying 'allowDuplicateItems: false' and 'setUniqueIds ...

javascriptsvgnpmsprite-sheetgrunt-svgstore

When an object is pushed into an array, it gets duplicated and also appears in a proxy when viewed in the console

Working with Firebase 9 and Vue 3 in building a chat application. The issue at hand is that when I push message objects to the messages array [], the console shows duplicates like this: Proxy {0: {…}, 1: {…}} [[Handler]]: Object [[Target]]: Array( ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Utilize the useRef hook to dynamically retrieve the updated height when children are altered

I am working with an accordion component and using the useRef hook to measure the height of the children. However, I noticed that when I update the content of the children dynamically, the height measurement does not get updated unless I click on the toggl ...

javascriptreactjs

Encountering RxJS errors during the process of constructing an object using streams retrieved from Firebase

I am currently in the process of developing a template-driven form that involves multiple streams from Firebase. Despite my efforts, I keep encountering errors with the json pipe. The error message I receive is "Converting circular structure to JSON as ...

angularfirebasefirebase-realtime-databaserxjsangularfire2

Troubleshooting npm test failure on CircleCI due to inability to locate installed package

It's puzzling that Circle is encountering issues with utilizing ts-mocha after it was successfully installed with npm install in a previous step of the build process. The functionality used to function properly, but now it suddenly stopped working. ...

node.jstypescriptnpmmocha.jscircleci

Execute a post request upon clicking with NEXT JS, while also firing off a get request

I'm facing an issue where I need to post and get my data when clicking on the same button (similar to writing and displaying comments). However, whenever I click the button, everything seems to be working fine but a request with a 304 status code star ...

javascriptreactjsnext.js

Error: The query has already been processed:

I'm encountering an issue while attempting to update the document. The error message indicates that the query has already been executed. MongooseError: Query was already executed: footballs.updateOne({ date: 'January 4' }, {}) app.post(& ...

javascriptmongodbexpressmongoosemongodb-query

Maintaining sequential order IDs for table rows even after removing records

I currently have a table structured as follows: <table> <tr> <td> <input type="hidden" name="help[0].id" /> </td> <td> <span class="tr-close">X</span> </tr> <tr ...

javascriptjqueryhtml-table

CSS exclusive - achieving a horizontal scrolling list with all list items in a single row

I am working with a div that has a fixed width. Inside this div, there is an unordered list (ul) containing a random number of list items (li) with varying widths. My project utilizes the Bootstrap framework. Below is an example of the code structure: & ...

htmlcsstwitter-bootstrap

AngularJS mobile navigation menu toggle not functioning properly with the close feature

I am currently developing a simple Single Page Application (SPA) using an HTML template. The template includes a mobile navigation menu, but I am facing issues with it not closing when navigating through routes in AngularJS. Can anyone provide guidance on ...

javascriptjqueryangularjs

Guide on switching the theme color in c# aspnet core using a toggle button within a partialview

Description I am looking to change the color scheme of my Bootstrap 5.3 theme by clicking a button within a partial view. The toggle button is customized to meet my specific requirements, and the chosen value is stored in a cookie for future reference. ...

javascriptc#asp.net-mvcasp.net-corebootstrap-5

Make the header background color shift as the page is scrolled down on the fixed header

I am currently using a sticky transparent header on my website www.obviagency.com Here is the CSS code: #site-header-inner { height:0px; z-index:170; margin:0 auto; width:100%; position:fixed; top:0; margin-top:10px; } I would like to change the backgr ...

csscolorsheadertransparentsticky

Customize the layout of menu icon in HTML/CSS using FlexBox Grid

Recently, I have encountered an issue with the position of a menu icon on my website. The icon is displayed when the window reaches a certain size, but it is not aligned properly on the right side of the site. Ideally, I would like to use the "right" prope ...

htmlcss

Unlocking the secrets to obtaining a socket.io client

I encountered an error when trying to set up a socket.io server and client. The error I received on the client side was: Failed to load resource:http://localhost:3000/socket.io/?EIO=4&transport=polling&t=OK-egu3 the server responded with a status o ...

javascriptexpresssocket.ioejs

In a situation where Typescript fails to provide enforcement, how can you effectively indicate that a function is not defined for specific value(s)?

If I were to utilize Typescript to create a function called mean that calculates the mean of an array of numbers, how should I handle the scenario where the array is empty? Enforcing that an array must be non-empty can be inconvenient, so what would be th ...

typescripttypes

Establishing updated file path for resources in JavaScript based on environment

I'm currently facing an issue with my external Javascript file that uses the getScript() function to execute another JS file. Both files are located on static.mydomain.com, as I am trying to set up a Content Delivery Network (CDN) for the first time. ...

phpjavascriptjquerycsscdn