Dropdown無法從對象中提取數值（Angular 4）

Question

我從API中提取數據，除非將JSON選項數值綁定到[value]標記，否則這樣做很好。見例如：

WORKING（數據從API得到被選擇的選項）

<select [(ngModel)]="data.from.api.one" class="form-control"> 
<option *ngFor="let c of subdimension" [value]="c.name">{{ c.name }}</option> 
</select> <!-- select with c.name on value --> 

NOT WORKING（數據不被選擇並且該第一個選項是空）

<select [(ngModel)]="data.from.api.one" class="form-control"> 
<option *ngFor="let c of subdimension" [value]="c.value">{{ c.name }}</option> 
</select> <!-- select with c.value on value --> 

JSON對象：

subdimension = [{'name': 'sub1','value': 2 }, 
    {'name': 'sub2','value': 4 }, 
    {'name': 'sub3','value': 8}] 

我想要做的是一個數字值綁定到一些選擇，然後總結所有的人都喜歡：

data.from.api.one + data.from.api.two ...

編輯：

從data.from.api

constructor (public dataService:DataService){ 
    this.dataService.getData().subscribe(datas => { 
     this.datas = datas; 
    }); 
    } 

getData(){ 
return this.http.get('https://api.url/').map(res => res.json()); 
       } 

datas:Data[]; 

data = { 
    from:{api:{one:'',two:'',three:''}} 
} 

Answer 1

一切正常組件的代碼。我創建了plunker。您需要在請求後設置ngModel值。

<select [(ngModel)]="data.from.api.one" class="form-control"> 
<option *ngFor="let c of subdimension; let i = index" [ngValue]="c">{{ 
    c.name }}</option> 
</select> 

，如果你想純數

<select [(ngModel)]="data.from.api.one" class="form-control"> 
<option *ngFor="let c of subdimension; let i = index" [value]="c.value">{{ 
    c.name }}</option> 
</select> 

在代碼中使用這個代碼在ngOnInit鉤

return this.http.get('https://api.url/').map(res => res.json()).do((d) => { 

    this.subdimension = d; 
     //if you use object 
     this.data.from.api.one = d[0] 
     //if you use value 
     this.data.from.api.one1 = d[0].value 
    }) 

或

this.dataService.getData().subscribe(datas => { 
    this.datas = datas; 
    this.data.from.api.one = datas[0] 
     //if you use value 
     this.data.from.api.one1 = datas[0].value 
});