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

【问题标题】：Angular 4 select option auto populate from page load, does not work with ngModelAngular 4 选择选项从页面加载自动填充，不适用于 ngModel
【发布时间】：2017-10-31 14:09:48
【问题描述】：

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

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

但是我需要绑定选定的值，所以 ngModel 出现在它失败的地方。下面是我的代码

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

【问题讨论】：

嗯，你需要将初始值设置为 selectedItem（你想要预选的值），否则当然无法从数组中找到selectedItem。在这种情况下，ngModel 会覆盖 [selected]
我看到你添加了 plunker。你有没有尝试过我的建议？

标签： angular

【解决方案1】：

@AJT-82 ，是的，我也尝试过，即使我尝试使用虚拟值但没有成功。

但它现在可以工作了 - 通过添加 #bindForm="ngForm" 和 #kannelSettingsId="ngModel"

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

【讨论】：

【解决方案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;
}

【讨论】：