When I retrieve data from an API, everything works smoothly except when I try to bind my JSON option number value into the [value] tag. Here's an example:
SUCCESSFUL (data retrieved from API is selected in the option)
<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 -->
UNSUCCESSFUL (data not selected and first option is null)
<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 object:
subdimension = [{'name': 'sub1','value': 2},
{'name': 'sub2', 'value': 4},
{'name': 'sub3', 'value': 8}]
My goal is to bind a number value into some selects and then sum them all together like:
data.from.api.one + data.from.api.two...
UPDATE:
Here is the component code for the data.from.api:
constructor(public dataService: DataService) {
this.dataService.getData().subscribe(data => {
this.datas = data;
});
}
getData() {
return this.http.get('https://api.url/').map(response => response.json());
}
datas: Data[];
data = {
from: { api: { one: '', two: '', three: '' } }
}