无法 select 选项中的值（Angular 下拉列表。）

Question

我到处搜索。我从得到的是，如果我想 select 一个特定的选项，我需要使用 [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

不需要在你的选项中使用[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 匹配，然后才会 selected.

Component.ts

selectedStatus: string;

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

有关 select 个选项的更多信息 check here

Answer 2

将选项与值而不是 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 3

我介绍一下我是如何解决这个问题的。请注意，我是 angular 的新手，我的方法可能很初级。我还想感谢@Eliseo，他强调了 ngModel 和 selected 不能一起使用的事实。这就是我摆脱前者并仅使用选定内容的原因：

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

它解决了我的问题，但它可能不是最好的方法。请随时发表评论。

无法 select 选项中的值（Angular 下拉列表。）

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

select

html-select

angular