选择下拉值匹配以使其在预填充时不区分大小写

Question

In Html template

<select [(ngModel)]="modelName">
  <option *ngFor="let ele of elements" [value]="element">{{ele}}</option>
</select>

In .ts file

this.elements = ['ABCd', 'mnOp'];
this.modelName = 'Abcd';

I Expect the value of the modelName 'ABCd' to be preselected from the list.

Currently nothing is displayed in the Select box though the modelName contains value 'Abcd'

Answer 1

The select's value is undefined because element is undefined so it is not able to match to the string 'Abcd' . To make the values lowcase I would map your element values to an object.

Should be:

<select [(ngModel)]="modelName">
    <option *ngFor="let ele of elements" [value]="ele.value">{{ele.label}}</option> 
</select>

In the component:

this.elements = ['ABCd', 'mnOp'].map((v) => ({ value: v.toLowerCase(), label: v }));

this.modelName = 'abcd';

Answer 2

Like teddy said, the strings compared between the 'select' value and the 'element' values are case-sensitive. You can either copy the value from the first element manually or, since you already conveniently have the array in your code, assign the first element of the array directly to your model. This way if for some reason the array is created dynamically you won't have to worry about finding the value;

HTML

<select [(ngModel)]="modelName">
    <option *ngFor="let ele of elements" [value]="ele">{{ele}}</option> 
</select>

TS

this.elements = ['ABCd', 'mnOp'];
this.modelName = this.elements[0];

EDIT

Based on what you've said I believe the best solution for you is indeed to change the case of the variables. Angular provides a couple pipes to do so. This method requires that you split the two-way binding up, and create two different fields for property binding and event binding . See below:

HTML

<select 
    [ngModel]="modelName | uppercase"
    (change)="modelName = $event" >
    <option *ngFor="let ele of elements" [value]="ele | uppercase">
        {{ele}}
    </option> 
</select>

Hope this helps someone. Good Luck!