0

我目前正在Angular2为TypeScript. 现在我正处于将来自hast 的数据显示在我的 ng2-chart 组件中的地步。frontendbackendbackend

我正在我的父组件 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()发生之前以某种方式呈现了子组件的图表，因此我的数据没有显示。我正在寻找某种更新功能，但没有成功。

希望有人能解答这个问题

塞巴斯蒂安

4

3 回答 3

0

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

于 2016-08-01T14:39:34.647 回答
0

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

感谢所有的答案！

于 2016-08-02T07:30:08.777 回答
0

@Arpit 是正确的 - 您应该使用ngOnChanges而不是ngOnInit依赖于通过它传递给它的数据的任何东西@Input。

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

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

public barChartData: any[];
public barChartLabels: string[];

ngOnChanges(){
    if(this.barData && this.barLabels){
        this.barChartData = this.barData;
        this.barChartLabels = this.barLabels;

        //Do anything else that relies on these arrays being defined.
    }
}

这是文档。

于 2016-08-02T08:25:06.597 回答