如何設置角度2無功選擇的初始值

我有一個選擇列表，我想要初始化從服務器返回的保存值。但無論我嘗試什麼，我都無法讓它使用選定的值。如何設置角度2無功選擇的初始值

我正在使用Angular 2.2.0和活性形式。

以下是選擇列表的值列表。

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

預期結果 項目之一的名稱在選擇選擇和匹配模板下的JSON文本顯示

實際行爲 JSON顯示：

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

但沒有什麼是在選擇

選擇 - 請選擇 - 如果正確選擇JSON更新爲「」。

如果選擇了另一隻貓，JSON也會正確更新。

我在做什麼錯，如何初始化select？

EDIT 我也嘗試這樣的：

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

來源

2017-02-01 Kildareflare

不知道你是否真的會得到我的答案的通知，因爲我刪除它並將其刪除。如果沒有，那麼請看下面的答案，希望對你有幫助！ :) – Alex

如果我正確理解你，你想設置一個默認值。然後你可以參考你的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，那不會綁定整個對象！

這是一個工作Plunker。不知道你在哪裏設定數值，在這一點上，我已經在模擬器中做出了一個setValues-按鈕，它們模仿了後面的值的設置。

希望得到這個幫助！

來源

2017-02-01 11:54:28 Alex

以爲我試過這個排列，但它可能已經丟失了，因爲實際的代碼比這更復雜一點。感謝您讓我朝着正確的方向！ – Kildareflare

嘗試使用[attr.selected]和[attr.value]而非[選擇]和[ngValue]。

來源

2017-02-01 08:28:29 igor

試試看看這個代碼。這是工作Angular 5

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

來源

2018-02-08 10:50:57 Senthil

如何設置角度2無功選擇的初始值

回答

相關問題