如何从下拉菜单中为本地对象分配一个新值

Question

I have an array of objects that all have a name property. In my drop-down, I display all of these objects using this name property. I want the user to be able to select a new name from the list, and assign the associated object to a variable named selectedGlobalClass . How can I get this to happen?

Here is my html:

<select (change)="changeClass(class)">
        <option *ngFor="let class of globalClasses" [selected]="class.GlobalClassID==selectedOption.FK_GlobalClassID">{{class.GlobalClassName}}</option>
    </select>

And TS:

  changeClass(inputClass: GlobalClass): void {
this.selectedGlobalClass = inputClass;
  }

Also, when first opening the component, I would like to automatically select the item from the list in which the GlobalClassID is equal to the selectedOption property's FK_GlobalClassID . This is why I have the [selected]="class.GlobalClassID==selectedOption.FK_GlobalClassID"

Answer 1

Use Form Controls:

add line to .ts file

className = new FormControl('');

This creates a new Form Control. (Angular Reactive Form).

use form control in html <select (change)="changeClass(className.value)" [formControl]="className"> <option value="class.GlobalClassName" *ngFor="let class of globalClasses" >{{class.GlobalClassName}}</option> </select>

This creates a select that sets the value of the formControl in .ts file to class.GlobalClassName.

**Now: **

all you have to do now is in changeClass() is change the parameter to a string value and then use conditionals to set the variable equal to the specific object with the name from class.GlobalClassName.

Answer 2

You just need to use angular reactive form
Start by giving a formControlName to your selected field

in your html file

<select (change)="changeClass(className.value)" formControlName="className">
<option [value]="class.GlobalClassName" *ngFor="let class of globalClasses" > 
{{class.GlobalClassName}}</option>
</select>

in ts file

    ngOnInit(){
    className = new FormControl('');
    }