Unable to select value in option (Angular dropdown list.)

Question

I have searched far and wide. What I got from other answers is that I need to use [selected] if I want to select a particular option.

It does not seem to be working. Why? Here is what I have:

<ngx-datatable-column name="status" prop="operationStatus" [flexGrow]="1">
    <ng-template let-value="value2" let-row="row" let-rowIndex="rowIndex" gx-datatable-cell-template>
          <select class="geraeteStatus" [(ngModel)]="selectableGerateStatus">
             <option *ngFor="let e of selectableGerateStatus" [ngValue]="e" 
                 [selected]="e.id === value2">
                {{e.id}}
             </option>
          </select>
   </ng-template>
</ngx-datatable-column>

I am sure that the value of e.id equals that of value2 at least once per iteration. However it just does not work. Actually I can put whatever I wish (e.id === 2, or even 'true') into [selected] it does not have any effect. I have no idea what I am missing. Any answer is highly appreciated.

if you're using [(ngModel)] you must NOT use [selected]. The problem is that you're using [ngValue]="e". So, the variable "selectableGenerateStatus", is an object -really you need that it's was the same object. Use [ngValue]="e.id" to work — Eliseo, Mar 12 '19 at 12:08
OK, I got it. I removed 'selected'. I changed to the following: . But it still does not work — Sanyifejű, Mar 12 '19 at 12:16

Ganesh · Answer 1 · 2019-03-12T12:31:06.987

0

There is no need to use [selected] in your options

just do some changes like below

Component.html

<select class="geraeteStatus" (change)="onChange($event)" [(ngModel)]="selectedStatus">
   <option *ngFor="let e of selectableGerateStatus" [ngValue]="e.id">
     {{e.id}}
   </option>
</select>

but here you need to match ngValue with your ngModel then only it will be selected.

Component.ts

selectedStatus: string;

onChange(status: string) {
   this.selectedStatus = status;
}

For more info about select options check here

edited Mar 12 '19 at 12:31

answered Mar 12 '19 at 12:16

Ganesh

5,808
2
21
41

thanks gnaesh045.Unfortunately it still does not work. – Sanyifejű Mar 12 '19 at 12:17

score 0 · Answer 2 · answered Mar 12 '19 at 12:33

Bind the option with value instead of ngValue as below.

<select class="my-status" [(ngModel)]="myModel.status">
         <option [ngValue]="null" selected disabled> Select Status </option>
         <option *ngFor="let e of selectableGerateStatus" [value]="e">
            {{e.id}}
         </option>
</select>

Sanyifejű · Accepted Answer · 2019-03-12T16:05:26.080

I present how I solved the problem. Note that I am quite new to angular, and my approach might be rudimentary. I also want to give credit to @Eliseo who highlighted the fact that ngModel and selected must not be used together. That's whay I got rid of the former and used selected only:

component.html

 <select class="geraeteStatus" (change)="changeGaerateStatus($event, rowIndex)">
          <option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
               {{e.label}}
            </option>
 </select>

and the .ts file:

    this.selectableGerateStatus = [
  {
    id: 0,
    label: BaseDataComponent.NEW
  }, {
    id: 1,
    label: BaseDataComponent.ACTIVE
  }, {
    id: 2,
    label: BaseDataComponent.DEINSTALLED
  }
]

It solved my problem, but it might not be the best approach. Feel free to comment.

Unable to select value in option (Angular dropdown list.)

3 Answers3