Angular 如何设置角度2无功选择的初始值

我有一个选择列表，我想将其初始化为从服务器返回的保存值。但是无论我尝试什么，我都无法让它使用所选的值

我使用的是Angular 2.2.0和被动形式

以下是选择列表的值列表

保存的值为：

我使用FormBuilder创建表单

然后我用保存的数据初始化它

但“选择”对话框中未选择任何内容

如果选择-Select-则JSON将正确更新为

如果选择了另一个cat，JSON也会正确更新

我做错了什么，如何初始化select

编辑 我也试过：

<option *ngFor="let cat of categories" [selected]="itemForm.controls['category'].value.id == cat.id" [ngValue]="cat">

---

尝试使用[attr.selected]和[attr.value]而不是[selected]和[ngValue]。

如果我理解正确，您需要设置默认值。然后，您可以只参考item.category+要设置的值的索引

我会像这样设置值，其中我们将第一项设置为默认值

setValues() {
    this.itemForm
        .setValue({
            name: item.name,
            category: item.category[0].id
        })
}

然后在表单中使用formGroup和formControlName，因此：

<form [formGroup]="itemForm">
  <input formControlName="name"/>
  <small *ngIf="!itemForm.controls.name.valid">Name is required!</small>
  <!-- More code -->
  <select formControlName="category">
    <! -- set ngValue to cat.id --> instead of just cat!
    <option *ngFor="let cat of categories" [ngValue]="cat.id">  
      {{cat.name}}
    </option>
  </select>
</form>

根据您想要使用的内容，将[ngValue]或仅使用[value]设置为cat.name或cat.id，因此如果您使用的是ngValue，则不会绑定整个对象

这是一张工作票。不知道在哪里设置值，在哪一点上，我在Plunk中创建了一个setValues按钮，它模拟以后设置值的情况

---

希望这有帮助

试试这段代码。它正在工作

<select formControlName="category">
 <option [ngValue]="undefined" selected disabled>Select Type</option>
    <option *ngFor="let cat of categories" [ngValue]="cat.id">  
      {{cat.name}}
    </option>
  </select>

---

不知道你是否真的会收到关于我答案的通知，因为我已经删除并取消了它。如果没有，请在下面寻找答案，希望能对您有所帮助我想我已经尝试过这种排列，但它可能已经丢失了，因为实际的代码比这个稍微复杂一些。谢谢你给我指出了正确的方向！对我来说，关键是formControlName=name，我正在构建一个动态表单，所以对我来说，关键是formControlName={{name}}

<select name="category" [formControl]="itemForm.controls['category']">
         <option [selected]="itemForm.controls['category'].value == null" value="">-- Select --</option>
        <option *ngFor="let cat of categories" [ngValue]="cat">  
            {{cat.name}}
        </option>
    </select>
{{itemForm.controls['category'].value | json }}

 { "id": 1, "name": "Cat 1" }

<option *ngFor="let cat of categories" [selected]="itemForm.controls['category'].value.id == cat.id" [ngValue]="cat">

setValues() {
    this.itemForm
        .setValue({
            name: item.name,
            category: item.category[0].id
        })
}

<form [formGroup]="itemForm">
  <input formControlName="name"/>
  <small *ngIf="!itemForm.controls.name.valid">Name is required!</small>
  <!-- More code -->
  <select formControlName="category">
    <! -- set ngValue to cat.id --> instead of just cat!
    <option *ngFor="let cat of categories" [ngValue]="cat.id">  
      {{cat.name}}
    </option>
  </select>
</form>

<select formControlName="category">
 <option [ngValue]="undefined" selected disabled>Select Type</option>
    <option *ngFor="let cat of categories" [ngValue]="cat.id">  
      {{cat.name}}
    </option>
  </select>