无法将数组传递给从 @Input 获取数据的 chart.js

Question

我正在尝试了解如何将数据从父组件传递到子组件。
更具体地说，我想将父组件的数组移交给子组件，以便将其用作图表的数据源。

我正在使用 Angular 8、mdbootstrap（它使用 chart.js 2.5.0）。我阅读了一堆教程，并且弄清楚了如何将内容从父组件传递到子组件。我可以使用外推从我的子模板中访问字符串等。
我的问题可能与 chart.js 处理其图表呈现的方式有关。
我不确定它在生命周期的哪个阶段需要它的数据。我尝试在 ngOnInit 方法和 AfterViewInit 方法中填充所需的变量（代码中未显示），但这并没有改变任何东西。

父组件 (statistics.component.ts)

export class StatisticsComponent implements OnInit {

  // business logic
  public isDataLoaded = false;
  public clientNumberList: string[] = new Array();
  public clientNumberCountList: number[] = new Array();

  // chart related stufff
  public chartLabel = 'User Statistics';

  public chartOptions: any = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Client Number'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Count'
        }
      }]
    }
  };

  constructor(private sdoUserStatisticsService: SdoUserStatisticsService) {}

  ngOnInit(): void {
    // get users and counts
    this.sdoUserStatisticsService.getUserStatistics().subscribe(users => {
      for (const user of users) {
        this.clientNumberList.push(user.clientNumber);
        this.clientNumberCountList.push(user.count);
      }
      this.isDataLoaded = true;
    })
      ;
  }
}

statistics.component.html

<div *ngIf="isDataLoaded">
<app-bar-chart [chartLabelInput]="chartLabel" [dataArrayInput]="clientNumberCountList" [labelArray]="clientNumberList" [chartOptionsInput]="chartOptions"></app-bar-chart>
</div>

子组件 (bar-chart.component.ts)

export class BarChartComponent implements OnInit{

  public chartType = 'bar';

  @Input() chartLabelInput: string;
  @Input() dataArrayInput: number[];

  public chartLabel: string;
  public dataArray: number[] = this.dataArrayInput;
  public chartDatasets: Array<any> = [
    {data: this.dataArray, label: this.chartLabel}
  ];

  @Input() labelArray: string[];
  public chartLabels: Array<any> = this.labelArray;

  @Input() chartOptionsInput: any;
  public chartOptions = this.chartOptionsInput;

  constructor() {}
  public chartClicked(e: any): void { }
  public chartHovered(e: any): void { }

  ngOnInit(): void {}
}

栏-chart.component.html

<canvas mdbChart
        [chartType]="chartType"
        [datasets]= "chartDatasets"
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]=true
        (chartHover)=chartHovered($event)
        (chartClick)=chartClicked($event)>
</canvas>

我希望我可以访问 bar-chart.component.ts 中的 dataArrayInput，从而将此数据提供给图表。实际上，我可以在 ngOnInit 方法中访问此数组（代码中未显示），但不能将其用于图表。我在浏览器控制台中收到以下错误：

ERROR TypeError: "newElm.data is undefined"
    Angular 10
        datasets
        getDatasets
        getChartBuilder
        refresh
        ngOnInit
        checkAndUpdateDirectiveInline
        checkAndUpdateNodeInline
        checkAndUpdateNode
        debugCheckAndUpdateNode
        debugCheckDirectivesFn
    View_BarChartComponent_0 BarChartComponent.html:1
    Angular 30
    RxJS 5
    Angular 9ERROR TypeError: "newElm.data is undefined"
    Angular 10
        datasets
        getDatasets
        getChartBuilder
        refresh
        ngOnInit
        checkAndUpdateDirectiveInline
        checkAndUpdateNodeInline
        checkAndUpdateNode
        debugCheckAndUpdateNode
        debugCheckDirectivesFn
    View_BarChartComponent_0 BarChartComponent.html:1
    Angular 30
    RxJS 5
    Angular 9

希望有人能帮助我:)

Answer 1

我认为这是一个 Angular 生命周期问题。您的问题在于您如何使用 @Input 数据。您显然想要获取 dataArrayInput 附带的数据，但您没有正确访问它。

将依赖于@Input 值的变量赋值移动到ngOnInit 方法中。 @Input 变量的值在构建组件期间不可用，因此当您创建因变量时，您将使用 undefined.

初始化它们

export class BarChartComponent implements OnInit {

  public chartType = 'bar';

  @Input() chartLabelInput: string;
  @Input() dataArrayInput: number[];

  public chartLabel: string;
  public dataArray: number[];
  public chartDatasets: Array < any > ;

  @Input() labelArray: string[];
  public chartLabels: Array < any > ;

  @Input() chartOptionsInput: any;
  public chartOptions;

  constructor() {}
  public chartClicked(e: any): void {}
  public chartHovered(e: any): void {}

  ngOnInit(): void {
    this.dataArray = this.dataArrayInput;
    this.chartDatasets = [{
      data: this.dataArray,
      label: this.chartLabel
    }];
    this.chartLabels = this.labelArray;
    this.chartOptions = this.chartOptionsInput;
  }
}

看看这个 and this 。

无法将数组传递给从 @Input 获取数据的 chart.js

Can't pass array to chart.js which got its data from @Input

chart.js

angular

mdbootstrap

父组件 (statistics.component.ts)

statistics.component.html

子组件 (bar-chart.component.ts)

栏-chart.component.html