下拉菜单无法从对象中提取数值（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
});