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

Question

我搜索得很远。我从other answers得到的是，如果我想选择一个特定的选项，我需要使用[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，甚至'真'）放入[selected]它没有任何效果。我不知道我错过了什么。任何答案都非常感谢。

Answer 1

您需要将应该绑定到此“select”的字段设置为ngModel而不是可能的选项列表。请更改您的代码：

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

'x.status'必须由你的真实领域取代。

Answer 2

您无需使用[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;
}

有关选择选项check here的更多信息

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

我介绍了如何解决问题。请注意，我对角度很新，我的方法可能很简陋。我还想对@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
  }
]

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