Html Angular 2模型驱动窗体中的下拉列表

我有一个模型驱动的表单，我想在其中添加一个包含多个选项的下拉列表。这些选项来自预先获取的列表，表单的模型被注入到组件中。表单加载正确：模型中的所有字段都正确填写，下拉列表的选项列表也正确加载。
唯一的问题是我无法设置列表的

selected

值，它首先显示为空值

在这里，我加载HMO列表，然后加载患者，然后创建表单。
表单的所有值（此处省略的名称、id等）都已正确加载到表单中。
表单中的下拉列表填写正确：所有HMO正在填充列表。
但是，列表中的选定值丢失，丢失的值加载时没有初始值。
出于调试目的，我已将

选项

标记中的布尔条件：

patient.hmo.uid==hmo.uid

替换为函数调用：

isSelected（hmo）

该函数基本上执行相同的比较并返回其值，但首先记录它。事实上，我看到具有正确hmo的选项获得

true

值，而所有其他选项获得

false

值，这意味着所有数据都正确加载

另外，当我设置

[selected]=“true”

（始终为true）时，我确实看到了更改的影响：最后一个选项被选中（HTML中的默认值）

那我错在哪里呢？如何正确设置所选选项？

组件代码（省略除HMO以外的所有字段）：

HTML表单的代码：

<div class="row" *ngIf="showForm">
  <div class="col-xs-12" *ngIf="showForm">
    <form [formGroup]="patientForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="hmo">HMO</label>
        <select formControlName="hmo" id="hmo">
          <option *ngFor="let hmo of hmos"
                  [value]="hmo.uid" [selected]="patient.hmo.uid == hmo.uid">
            {{hmo.name}}
          </option>
        </select>
    </form>
  </div>
</div>

Hmo的代码：

export class Hmo{
  constructor(public uid: number, public name: string){}
}

---

通过比较

的值与

的值来计算所选选项。有鉴于此，要将

标记为选中，我们需要确保包装

包含相同的值，这反过来需要模型中相应表单控件的正确值

您的代码可以稍微修改如下：

  restartForm(){
    this.patientForm = this.formBuilder.group({
      hmo: [this.patient.hmo.uid]
    });
    this.showForm = true;
  }

和模板：

<select formControlName="hmo" id="hmo">
   <option *ngFor="let hmo of hmos"
     [value]="hmo.uid">
        {{hmo.name}}
   </option>
</select>

{{hmo.name}

  restartForm(){
    this.patientForm = this.formBuilder.group({
      hmo: [this.patient.hmo.uid]
    });
    this.showForm = true;
  }

<select formControlName="hmo" id="hmo">
   <option *ngFor="let hmo of hmos"
     [value]="hmo.uid">
        {{hmo.name}}
   </option>
</select>