在视图更改时通过Angular2传递值

时间:2017-01-12 10:47:12

标签: angular typescript google-visualization google-gauges

当Angular2值发生变化时,我想更新我的Google图表。

在我的Angular2 test.component.html中,我有一个这样的模板:

<h1>
  Test Chart
</h1>

<div>
  // I want to bind this value with Goolgle Gauge
  {{parameter.value}}
</div>

<div class="gauge">
  <google-chart [data]="gaugeChartOptions"></google-chart>
</div>

我的Angular2 test.component.ts看起来像这样:

export class ChartTestComponent implements OnInit {

  public parameter: Parameter;

  public gaugeChartOptions = {
    chartType: 'Gauge',
    dataTable: [
      ['Label', 'Value'],
      ['Value', 5] // I'd like to bind it with {{parameter.value}}
    ],
    options: {
      width: 200, height: 250,
      redFrom: 90, redTo: 100,
      yellowFrom: 75, yellowTo: 90,
      minorTicks: 5
    },
  };

  constructor(private parameterService: ParameterService) {
  }

  changeVal(value: number) {
    this.gaugeChartOptions = Object.create(this.gaugeChartOptions);
    this.gaugeChartOptions.dataTable[1][1] =  Number(value);
  }

  ngOnInit() {

    this.parameter =  this.parameterService.getByPath('test_signal/10_Hz');
  }


}

如何使用{{parameter.value}}更改量表值?

谢谢。

0 个答案:

没有答案