无法在选项中选择值（角度下拉列表。）

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.

Answer 1

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

Answer 2

You need to set the field that should be bound to this 'select' into ngModel instead of the list of possible options. Please change your code like this:

<select class="geraeteStatus" [(ngModel)]="x.status">
         <option *ngFor="let e of selectableGerateStatus" [ngValue]="e">
            {{e.id}}
         </option>
</select>

' x.status ' has to be replaced by your real field.

Answer 3

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>

Answer 4

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.