根据下拉选择|更改显示的图形数据Angular 4

时间:2017-09-25 23:52:31

标签: javascript angular typescript chart.js

图形显示正确,我只想根据下拉选项更改数据,这是我到目前为止尝试的代码:

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
                    ]
                }
           };

这里的逻辑是当选择下拉列表时,计数器值将改变,数组值将显示我从API获得的数据。

HTML

<select [(ngModel)]="datas[0].dimension" class="form-control">
<option *ngFor="let data of datas" [value]="data.dimension">{{ data.dimension }}</option>
</select>

0 个答案:

没有答案