"Learn how to utilize Angular to showcase an array of strings and choose a specific value for

Question

"Learn how to utilize Angular to showcase an array of strings and choose a specific value for

When working in HTML, I have the ability to set the option text and send the value like this:

<select id="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>    
</select>

After sending it to my TS file, I can retrieve the value.

In Angular, I handle it like this:

<select  formControlName="Cars">
            <option *ngFor="let item of values_Car">
            {{item}}
            </option>
        </select>

TS

values_car : any = ["Volvo", "Saab"];

I am wondering how I can create a dictionary to display only the text and retrieve the corresponding values.

angular typescript

Answer 1

Answer №1

It seems like there is some confusion regarding the dictionary question, but you were on the right track with the *ngFor directive:

One thing to note is that you were not using the correct variable name values_car. Also, to bind the value correctly, you should use brackets around it, otherwise, "item" will be treated as a string instead of the actual value of the let item.

Here is the TypeScript code:

export class Car { 
    brand: string;
    id: string;
    constructor(brand: string, id: string) {
        this.brand= brand;
        this.id = id;
    }
}

values_car : any = [new Car('Volvo', '1'), new Car('Saab', '2')];

HTML code:

<select  formControlName="Cars">
    <option *ngFor="let item of values_car" [value]="item.id">
        {{ item.brand }}
    </option>
</select>

As you mentioned about an enum, I have included a function that converts an enum to an object to match the HTML structure.

carEnum: CarEnum = CarEnum

ngOnInit() {
    this.values_car = Object.keys(CarEnum).map(key => {
        return new Car(key, CarEnum[key])
    });
}

Answer 2

It seems like there is some confusion regarding the dictionary question, but you were on the right track with the *ngFor directive:

One thing to note is that you were not using the correct variable name values_car. Also, to bind the value correctly, you should use brackets around it, otherwise, "item" will be treated as a string instead of the actual value of the let item.

Here is the TypeScript code:

export class Car { 
    brand: string;
    id: string;
    constructor(brand: string, id: string) {
        this.brand= brand;
        this.id = id;
    }
}

values_car : any = [new Car('Volvo', '1'), new Car('Saab', '2')];

HTML code:

<select  formControlName="Cars">
    <option *ngFor="let item of values_car" [value]="item.id">
        {{ item.brand }}
    </option>
</select>

As you mentioned about an enum, I have included a function that converts an enum to an object to match the HTML structure.

carEnum: CarEnum = CarEnum

ngOnInit() {
    this.values_car = Object.keys(CarEnum).map(key => {
        return new Car(key, CarEnum[key])
    });
}

"Learn how to utilize Angular to showcase an array of strings and choose a specific value for

Answer №1

Similar questions

Guide to generating TypeScript output files within a non-hierarchical directory layout

What is the best way to integrate Sass into a Create-React-App project that is using TypeScript

Dealing with server-side errors while utilizing react-query and formik

The ReactJS Material Table Tree mode experiences delays when new row data is introduced

Making a HTTP Get request for a single item in Ionic 2

The function item$.take cannot be found, resulting in a TypeError: "item$.take is not a function"

Having trouble resolving React within the Formik/dist package due to a custom webpack configuration

Can we securely retrieve nested properties from an object using an array of keys in TypeScript? Is there a method to accomplish this in a manner that is type-safe and easily combinable?

Error encountered during npm installation - EPERM: Operation not allowed

What could be causing the error in Angular 2 when using multiple conditions with ng-if?

Leveraging private members in Typescript with Module Augmentation

When the next() function of bcrypt.hash() is called, it does not activate the save method in mongoose

Demonstrating a feature in a custom Angular Material dialog box

Show the subscription response data in Angular

Using Ionic to send email verification via Firebase

The functionality of TypeScript's instanceof operator may fail when the method argument is not a simple object

Navigating with Angular 6 - Utilizing Query Parameters within a designated secondary router outlet

Steps for styling the header of an Antd Collapse Panel

How can I showcase images from a server in Node.js to an Angular 2 application?

Special Syntax for Defining Custom Record Keys in TypeScript