The binding of data in ng2-select encountered an error

Successfully implementing ng2-select to bind an array of objects to a dropdown. It worked seamlessly with an array of strings.

private category: Array<object> = [{ "value": 1, "text": "Table" }, { "value": 2, "text": "Chair" }, { "value": 3, "text": "Light"}]

Here's the corresponding HTML code:

 <ng-select [items]="category" [allowClear]="true"
                                       placeholder="No country selected">
                            </ng-select>

The selectModule has been properly imported in my module.ts file as well.

angulartypescriptangular2-routingng2-bootstrap

Answer №1

Your data format needs adjustment.

Instead of:

private category: Array<object> = [
    { "value": 1, "text": "Table" },
    { "value": 2, "text": "Chair" },
    { "value": 3, "text": "Light" }
]

Try using:

private category: Array<object> = [
    { "id": 1, "text": "Table" },
    { "id": 2, "text": "Chair" },
    { "id": 3, "text": "Light" }
]

The crucial difference lies in the value property which serves as the identifier for each item. This was defined by the ng-select module developer.

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

Discover the correct way to locate the "_id" field, not the "id" field, within an array when using Javascript and the MEAN stack

I am working on an Angular application that connects to MongoDB. I have a data array named books, which stores information retrieved from the database. The structure of each entry in the array is as follows: {_id: "5b768f4519d48c34e466411f", name: "test", ...

javascriptarraysangularmongodbmean

Contrasting characteristics of class members in JavaScript versus TypeScript

Typescript, a superset of Javascript, requires that Javascript code must function in Typescript. However, when attempting to create class members in a typescript file using the same approach as Javascript, an error is encountered. CODE :- script.ts (types ...

javascripttypescript

How can Angular 4 manage an object containing other objects most effectively?

Who can guide me on the best way to handle a data structure like this: { "1":{ "id":"1", "name":"Facebook", "created_at":"", "updated_at":"", "fields":{ "1":{ "id":"1" ...

angulartypescriptionic-framework

An issue occurred while attempting to toggle the drawer navigation. It seems that the ToggleDrawer function is

I'm currently utilizing stack navigation in my application, but I have made the decision to add a Drawer for the user's menu. While I was able to incorporate the Drawer into my pages, some of them contain MapView content, causing the user to be ...

typescriptreact-nativenavigation-drawerreact-typescript

What is the procedure for invoking a function when the edit icon is clicked in an Angular application

My current Angular version: Angular CLI: 9.0.0-rc.7 I am currently using ag-grid in my project and I encountered an issue when trying to edit a record. I have a function assigned to the edit icon, but it is giving me an error. Error message: Uncaught Re ...

javascriptangulartypescriptag-grid

Issue with Typescript and eslint errors occurring exclusively in fresh code - Anticipated a colon.ts(1005)

Lately, in my extensive react-typescript project, I have encountered a peculiar issue. It seems that syntax errors are popping up everywhere, but only within the new code that I write. For instance, when creating a new component: import React from 're ...

reactjstypescriptvisual-studio-codesyntax-erroreslint

Why will the experimental activation of React concurrent features in Nextjs 12 disable API routes?

I just upgraded to Next.js version 12 and set up some API routes (e.g. "/api/products"). These routes were functioning properly, but when I enabled concurrentFeatures: true in my next.config.ts, the API routes stopped working. The console display ...

javascriptreactjstypescriptnext.js

How can you apply an active class using React-Router?

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

cssreactjstypescriptreact-routerreact-router-dom

ESLint error: Unauthorized access to member ['content-type'] on an unknown data type

Here are the eslint errors that occurred with the code provided: @typescript-eslint/no-unsafe-member-access: Unsafe member access ['content-type'] on an any value. export const fetchGraphPhoto = async () => { try { const response = aw ...

javascripttypescripteslint

Applause tally problem in Ionic3

For my university project, I am utilizing Ionic-3 and attempting to achieve a similar effect as shown in this example. Please take a look at my code on StackBlitz. I am encountering an issue where I want the count circle to move from the bottom to the top ...

angularionic-frameworkionic3

Is there a way to dynamically define the return type of a function in Typescript?

Can the variable baz be dynamically assigned the string type? type sampleType = () => ReturnType<sampleType>; // Want to return the type of any function I pass (Eg. ReturnType<typeof foo>) interface ISampleInterface { baz: sampleType; } ...

typescriptinterface

What is the best approach to re-establish a websocket connection in TypeScript?

Encountering an issue when trying to add a "retry()" method: ERROR in src/app/films.service.ts(28,20): error TS2339: Property 'retry' does not exist on type 'WebSocketSubject'. this.wsSubject.retry().subscribe( (msg) => this. ...

angulartypescriptwebsocket

Setting up Angular2 and WebAPI 2.0 in Visual Studio 2015 for seamless deployment on IIS

My team and I are embarking on a new project in the green field, utilizing Visual Studio 2015 for development. Our client application will be built entirely with Angular 2, while our API will be created using ASP.NET Web API 2.0. Here is how we have struc ...

angularasp.net-web-api2

Utilizing multiple parameters as variables in Angular's router

Here is an example of how my router configuration will be set up: { path: ':firstVariable', component: FirstComponent }, { path: ':secondVariable', component: Secon ...

angular

Tips for Achieving Observable Synchronization

I've encountered a coding challenge that has led me to this code snippet: ngOnInit(): void { this.categories = this.categoryService.getCategories(); var example = this.categories.flatMap((categor) => categor.map((categories) = ...

javascriptangulartypescriptobservable

Angular allows for the addition of unique styles to a JSON

When I receive a JSON response from BE, it is displayed as is. However, I would like certain keys such as "type, includeDeactive, code etc..." to be in bold and the corresponding values to be italicized after the colons (:). Example: body: { ...

jsonangularparsingformatstyles

What is the alternative method for converting an API stream into a .csv file without relying on FileSaver or createObjectURL()?

These are the only two methods currently available. An issue with createObjectURL() is that it is deprecated and cannot be called in Chrome anymore. Using FileSaver may feel like adding unnecessary complexity to your project when it should be a simple ta ...

angulartypescriptfiledownload

Expanding the capabilities of Hapi types in Typescript

I'm in the process of enhancing existing hapi definitions by incorporating a new type, specifically the seneca type. Here's an example: interface SenecaMethods { act: any; add: any; } interface HapiServer extends Hapi.Server { info: ...

typescripthapi.js

Angular templates offer the benefit of reusable code snippets

New functionality now allows us to use else snippets in reference to an <ng-template>: <div *ngIf="condition; else not"> Condition satisfied. <ng-template #not> Condition not satisfied. </ng-template> </div> I am i ...

angularangular2-templateangular-ng-if

Apollo Client's useQuery function is causing unnecessary refetches when using Next.js' router.push method

Currently, I'm facing an issue where a query within a useQuery Apollo Client hook is being re-run unnecessarily every time Next.js's router.push function is triggered. The problem code snippet looks like this: const Parent = () => { useQuery ...

javascripttypescriptnext.jsgraphqlapollo