4

I'm pulling data from an API, which is going fine unless I bind my JSON option number value into the [value] tag. see example:

WORKING (data got from API is selected on 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 -->

NOT WORKING (data is not selected and the 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}]

What I want to do is to bind a number value into some selects and then sum all of them like:

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

EDIT:

Component code from the 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:''}}
}
Gustavo
  • 874
  • 4
  • 13
  • 27
  • by any chance are you setting a defaut value to **data.form.api.one** if so please post a bit of the component where this gets set. – Sonicd300 Sep 14 '17 at 18:01
  • @Sonicd300 Edited with code – Gustavo Sep 14 '17 at 18:12
  • Very similar question but AngularJS: https://stackoverflow.com/questions/28114970/angularjs-ng-options-using-number-for-model-does-not-select-initial-value ... Issue is that "select" options have to be strings, but you're trying to use a number value directly. Perhaps fixed if you parse to/from strings? – mc01 Sep 14 '17 at 19:36
  • @mc01 just realized this is not just for numbers, I added a new string properties on the json object and still the same problem. It only works if I put the c.name on [value] (which is equal from the string that is calling from the API). The question is, how to I bind it to another value differently from the c.name? – Gustavo Sep 14 '17 at 20:05

1 Answers1

0

Everything works. i have created plunker. You need to setUp ngModel value after request.

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

and if you want pure number

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

In your code use this code in ngOnInit hook

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

or 

 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
});
alexKhymenko
  • 5,450
  • 23
  • 40