将 Angular FormGroup 绑定到 Chartjs 数据答案

【问题标题】：Bind Angular FormGroup to Chartjs data将 Angular FormGroup 绑定到 Chartjs 数据
【发布时间】：2021-06-02 04:10:47
【问题描述】：

在我的示例doughnutChartData 中包含在formGenerator 中初始化的数据的数组副本。我想使用角度绑定。如果我改变我的表格，我想动态地改变我的圆环图。

HTML 模板：

<canvas baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="doughnutChartType"></canvas>

角度组件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-generator',
  templateUrl: './generator.component.html',
  styleUrls: ['./generator.component.scss']
})
export class GeneratorComponent implements OnInit {

  public doughnutChartLabels = ['foo', 'bar'];
  public doughnutChartData = [30, 15];
  public doughnutChartType = 'doughnut';
  formGenerator: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.formGenerator = this.formBuilder.group({
      sequenceNumberTime: 30,
      sequenceLetterTime: 15
    });
  }

  ngOnInit(): void {
  }

}

我尝试了这个但不工作：

this.doughnutChartData = [this.formGenerator.controls.sequenceNumberTime.value, this.formGenerator.controls.sequenceLetterTime.value];

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

使用this.formGenerator.valueChanges.subscribe(val => { ... });

完整代码：

export class GeneratorComponent {

  public doughnutChartLabels = ['foo', 'bar'];
  public doughnutChartData;
  public doughnutChartType = 'doughnut';
  formGenerator: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.doughnutChartData = [30, 15];
    this.formGenerator = this.formBuilder.group({
      sequenceNumberTime: 30,
      sequenceLetterTime: 15
    });
    this.formGenerator.valueChanges.subscribe(val => {
      this.doughnutChartData = [val.sequenceNumberTime, val.sequenceLetterTime];
    });
  }

}

【讨论】：