angular - 如何设置 Angular 2 Reactive Select 的初始值

Question

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

我正在使用 Angular 2.2.0 和 Reactive Forms。

这里是选择列表的值列表。

private categoryList: ICategory[] = [
    new Category({ id: 1, name: 'Cat 1' }),
    new Category({ id: 2, name: 'Cat 2' }),
    new Category({ id: 3, name: 'cat 3' })
];

保存的值为:

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

我使用 FormBuilder 创建表单

   this.itemForm = this.fb.group({
      name: [null, Validators.required],
      description: [null, Validators.required],
      weight: [null, Validators.required],
      dimensions: [null, Validators.required],
      category:  [null, Validators.required] 
    });

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

  (<FormGroup>this.itemForm)
        .setValue({
          name: item.name,
          description: item.description,
          weight: item.weight,
          dimensions: item.dimensions,
          category: item.category 
        }, { onlySelf: true });

模板看起来像这样

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

预期结果select中选中item 1的名称，匹配template下显示的json中的文本

实际行为JSON 显示:

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

但是select里面什么都没有选中

如果选择 --Select--，JSON 将正确更新为“”。

如果选择了另一只猫，JSON 也会正确更新。

What am I doing wrong, how do initialise the select?

编辑我也试过这个:

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

Answer 1

如果我没理解错的话，你想设置一个默认值。然后你可以引用你的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 ，它不会绑定(bind)整个对象!

这是一个有效的 Plunker 。不知道你在哪里设置值，在这一点上，我做了一个 setValues - plunker 中的按钮，用于模拟稍后设置值。

希望对您有所帮助!