4

サーバーから返された保存された値に初期化したい選択リストがあります。しかし、何をしようとしても、選択した値を使用することはできません。

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

期待される結果 項目 1 の名前が選択で選択され、テンプレートの下に表示される JSON のテキストと一致します

実際 の動作 JSON はこれを示しています。

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

しかし、選択で何も選択されていません

--Select-- が選択されている場合、JSON は "" に正しく更新されます。

別の猫を選択すると、JSON も正しく更新されます。

何が間違っているのですか、選択を初期化するにはどうすればよいですか?

編集私もこれを試しました：

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

3 に答える 3

0

[selected] と [ngValue] の代わりに [attr.selected] と [attr.value] を使用してみてください。

于 2017-02-01T08:28:29.997 に答える