Невозможно выбрать значение в опции (Раскрывающийся список углов.)

Question

Я искал далеко и широко. Что я получил от других ответов , так это то, что мне нужно использовать [selected], если я хочу выбрать конкретную опцию.

Кажется, он не работает. Зачем? Вот что у меня есть:

<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>

Я уверен, что значение e.id равно значению value2 хотя бы один раз за итерацию. Однако это просто не работает. На самом деле я могу поместить все, что захочу (e.id === 2 или даже 'true') в [selected], это не имеет никакого эффекта. Я понятия не имею, что мне не хватает. Любой ответ высоко ценится.

Answer 1

Представляю, как я решил проблему. Обратите внимание, что я новичок в угловых и мой подход может быть элементарным. Я также хочу отдать должное @Eliseo, который подчеркнул тот факт, что ngModel и выбранные не должны использоваться вместе . Вот почему я избавился от первого и использовал только выбранное:

component.html

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

и файл .ts:

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

Это решило мою проблему, но, возможно, это не лучший подход. Не стесняйтесь комментировать.

Answer 2

Вам нужно установить поле, которое должно быть привязано к этому 'select', в ngModel вместо списка возможных опций.Пожалуйста, измените ваш код следующим образом:

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

' x.status ' должен быть заменен вашим реальным полем.

Answer 3

Свяжите опцию со значением вместо ngValue, как показано ниже.

<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

Нет необходимости использовать [selected] в ваших настройках

, просто сделайте некоторые изменения, как показано ниже

Component.html

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

но здесь вам нужно сопоставить ngValue с вашим ngModel, тогда будет выбран только он.

Component.ts

selectedStatus: string;

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

Для получения дополнительной информации о выбранных параметрах проверьте здесь