0

The graphic is being displayed correctly, I just want to change the data based on the drop down selection, this is the code I tried so far:

TS

this.graphicService.getDatas().subscribe(datas => {
      this.datas = datas;
      console.log(datas);

      if (this.datas[0].dimension == "level1")
      {
        this.counter = 1;
      }
      else if(this.datas[0].dimension == 'level2'){
        this.counter = 2;
      }
      else{
        this.counter = 3;
      }

            this.barChartData = {
                labels: ["Level1", "Level2", "Level3", "Level4", "Level5"],
                datasets: [{
                    label: 'Subdim',
                    data: [
                        this.datas[this.counter].subdimensions[0].level1,
                        this.datas[this.counter].subdimensions[0].level2,
                        this.datas[this.counter].subdimensions[0].level3,
                        this.datas[this.counter].subdimensions[0].level4,
                        this.datas[this.counter].subdimensions[0].level5
                    ]
                }
           };

The logic here is when the a drop down is selected, the counter value will change and the array value and show the data I got from the API.

HTML

<select [(ngModel)]="datas[0].dimension" class="form-control">
<option *ngFor="let data of datas" [value]="data.dimension">{{ data.dimension }}</option>
</select>
Gustavo
  • 874
  • 4
  • 13
  • 27
  • Will need more information on exactly what you'd like to be updated. Right now your counter is only updated whenever your subscription changes. Are you wanted to change the counter and barChartData based on the select? – Z. Bagley Sep 26 '17 at 00:26
  • Yes, how would I do that? – Gustavo Sep 26 '17 at 00:29
  • You're looking for `ngModelChange`. I'd say check SO for questions about that. You'll probably want to make a new item called `currentDatas` make it = to datas[0] in your subscription. Make that the [ngModel], and then use (ngModelChange) to update the value and apply the counter and graph changes. – Z. Bagley Sep 26 '17 at 01:15
  • This was a good explanation: https://stackoverflow.com/questions/34405301/detect-change-to-ngmodel-on-a-select-tag-angular-2 – Z. Bagley Sep 26 '17 at 01:20
  • I was not able to implement this into my current code, could you be more specific? – Gustavo Sep 26 '17 at 02:00

0 Answers0