Question

我有更新/编辑功能页面，其中页面加载/填充来自数据库的现有值，以便用户可以更改和更新提交。

当我将<select>放入select标记时，除了[(ngModel)] =""下拉列表之外的所有其他控件都正常工作，但是如果我删除了ngModel，那么它会正确填充值。

但我需要绑定选定的值，因此ngModel会在失败的地方进入。以下是我的代码

普通网址 - https://plnkr.co/edit/HqCOOE4fg3nmwssOXIz3?p=preview

<select [(ngModel)]="selectedItem" name="kannelSettingsId" class="form-control">
   <option *ngFor="let item of kannelList;let index=index; trackBy:trackByIdx()" [value]="item.kannelSettingsId" [selected]="item.kannelSettingsId === bind.kannelSettings.kannelSettingsId">
      {{item.server}}
   </option>              
</select>

Answer 1

@ AJT-82，是的我甚至尝试了虚拟值，但没有成功。

但它现在正在工作 - 添加#bindForm =＆＃34; ngForm＆＃34; ＆安培; #kannelSettingsId =＆＃34; ngModel＆＃34;

＆＃13;

<form class="form-horizontal" #bindForm="ngForm">
   <select required minlength="1" #kannelSettingsId="ngModel" 
          [(ngModel)]="bind.kannelSettings.kannelSettingsId" 
                name="updateKannelSettingsId" class="form-control">
      <option *ngFor="let item of kannelList;"
         [value]="item.kannelSettingsId" 
         [selected]="item.kannelSettingsId === bind.kannelSettings.kannelSettingsId">
       
       {{item.server}}
      
      </option>              
   </select>
</form>

＆＃13;

Answer 2

发现了这个问题，供我以后参考以及需要它的人！

注意：适用于反应形式！

简单有效！

 <select class="form-control" [compareWith]="compareByOptionId"  formControlName="kannelSettingsId">
      <option *ngFor="let item of kannelList" [ngValue]="item">{{item.server}}</option>
 </select>

在组件文件上添加此方法

compareByOptionId(idFist, idSecond) {
  return idFist.id === idSecond.id;
}

Angular 4选择选项从页面加载自动填充，不适用于ngModel

2 个答案: