Setting value of Select - Angular 2

Question

I have to set the option value of my select using a JSON file. The Object is the following:

export class Car { ID: String; Name: [{ confName: String } }] }

I am trying to set it with the following code:

this.baseService.getCars(message) .subscribe(cars => { this.cars = cars; myCars = this.cars; //Car is a global variable }); var $el = $("#carSelect"); $el.empty(); // remove old options $.each(myCars, function (key, value) { $el.append($("<option></option>") .attr("value", value).text(key)); });

I know that for accessing to the confName of one of them I need to use console.log(myCars[0].Name.confName); so probably the error is here:

 $.each(myCars

because I need to access to Name to get then the value,key of confName I want to do it for each each

JQuery or Javascript. With HTML I have some problems that I can not solve — bellotas
– bellotas, Commented Jan 9, 2018 at 8:26
@MarioLópez Using Jquery in this way totally defeats the purpose of a data driven approach like Angular. — Shadowlauch
– Shadowlauch, Commented Jan 9, 2018 at 8:45
It's kinda unethical using jQuery in Angular. That just dissolves the whole purpose of Angular. — reeversedev
– reeversedev, Commented Jan 9, 2018 at 8:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

Stop using JQuery !

This is counter productive : you're using an advanced platform that can ease your life so much, yet you install another library to do exactly what it is supposed to do.

Not only you load unnecessary code, but it slows down your application and forces other devs to have knowledge about JQuery.

You want to give your select a value ? Here is how to do it in Angular.

First, create your select and options, and bind a value to it.

<select [(ngModel)]="mySelect"> <option *ngFor="let opt of myOptions" [value]="opt">{{ opt}}</option> </select>

Then, create the variables in your TS, and set the value of your select in your constructor.

export class myComponent { mySelect: string; myOptions: ['option 1', 'option 2', 'option 3']; constructor() { this.mySelect = this.myOptions[0]; } }

Your select now has the value of your first option.

If you want to use a service, do it like this

export class myComponent { mySelect: string; myOptions: ['option 1', 'option 2', 'option 3']; constructor() { this.loadCars(); } loadCars() { this.baseService.getCars(message) .subscribe(cars => { this.myOptions= cars; this.mySelect= cars[0]; }); } }

EDIT If you want to use objects :

<select [(ngModel)]="mySelect"> <option *ngFor="let opt of myOptions" [value]="opt.value">{{ opt.desc }}</option> </select>

In your TS

myOptions: [ { value: 1, desc: 'option 1' }, { value: 2, desc: 'option 2' }, { value: 3, desc: 'option 3' }, ];

The problem is that I can not use ngFor cause it can return just and object {} so I can not treat it as an array. It can even return a null
Of course you can, this has been made for it ! Just see my edit.
I mean that my options can be an array or not being an array. That means that I can get an array [] or an object {}. So I can not make ngFor cause sometimes is not an array. Anyway, I ll properly look ur answer in some minutes. Thanks
Then you have coded it wrong. A variable should only have one type, or every type (any type exactly). But even if you want to keep that, you can srill convert your object to an array. Ok, keep us updated !

Collectives™ on Stack Overflow

Setting value of Select - Angular 2

1 Answer 1

Stop using JQuery !

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Stop using JQuery !

4 Comments

Related