Question

我目前正在开发一个可视化应用程序，Angular2和TypeScript用于frontend，Spring {Boot用于backend。现在，我来自backend的数据将显示在我的ng2图表组件中。

我在父组件ngOnInit（）函数中加载数据。数据被推送到两个数组，这些数组作为我的子组件的输入，如下所示：

ngOnInit() {
    this._sqlService.getCubeErrors().subscribe(
      data => {
        for (var i = 0; i < data.length; i++) {
          this.barLabels.push(data[i]["monthCube"]);
          this.barData[0]["data"].push(data[i]["errors"]);
        }
      },
      err => { this.error = true }
    )
  }

在这里我的服务：

getCubeErrors() {
    return this.http.get('/rest/cubeerrors').map((res: Response) => res.json());
  }

将两个数组barLabels和barData传递给子组件，如下所示：

<bar-chart [barLabels]="barLabels" [barData]="barData" ></bar-chart>

在我的子组件中，我使用它们来创建图表：

    @Input() barData: any[];
    @Input() barLabels: Array<string>;

    public barChartData: any[] = this.barData;
    public barChartLabels: string[] = this.barLabels;

我尝试使用一些console.log（）断点跟踪数据，看起来它们是相同的。

我面临的问题是，在ngOnInit()发生之前，子组件的图表会以某种方式呈现，因此我的数据不会显示。我正在寻找某种更新功能但是没有成功。

我希望有人可能有这个答案，

塞巴斯蒂安

Answer 1

您应该使用ngOnChange更新图表组件的数据。

Answer 2

我现在想通了，我错过了我的子组件中的changeDetection: ChangeDetectionStrategy.OnPush,实现。

感谢所有答案！

Answer 3

@Arpit是正确的 - 您应该使用angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) .controller('AppCtrl', function($scope, $element) { $scope.myDate = new Date(); var myDatePicker = angular.element($element[0].querySelector('#myDatePicker')); var myDatePickerInputContainer = angular.element(myDatePicker[0].children[1]); var myDatePickerInput = angular.element(myDatePickerInputContainer[0].children[0]); myDatePickerInput.attr("type", "number"); });而不是ngOnChanges来处理依赖于通过ngOnInit s传递给它的数据的任何内容。

所以你的子组件非常相似，只是它会有一个@Input函数，它会在尝试使用它们之前检查ngOnChanges是否被提取过。

@Input

Here is the documentation.

父级

3 个答案: