Question

我的项目中存在使用 Angular 5 ， NgRx ，materialDesignBootstrap和 chartsjs 的问题。

基本上，当创建图表时，我会得到一个控制台消息列表，如下所示（图表无论如何都会正确显示）：

尝试配置＆＃39; _chartjs＆＃39;使用描述符＆＃39; [object Object]＆＃39;对象＆＃39; 17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39＆＃39;并得到错误，放弃：TypeError：无法定义属性_chartjs，对象不可扩展 - zone.js：2228

尝试配置＆＃39;推送＆＃39;使用描述符＆＃39; {＆＃34; configurable＆＃34;：true，＆＃34; enumerable＆＃34;：false}＆＃39;对象＆＃39; 17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39＆＃39;并得到错误，放弃：TypeError：无法定义属性推送，对象不可扩展 - zone.js：2228

尝试配置＆＃39; pop＆＃39;使用描述符＆＃39; {＆＃34; configurable＆＃34;：true，＆＃34; enumerable＆＃34;：false}＆＃39;对象＆＃39; 17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39＆＃39;并得到错误，放弃：TypeError：无法定义属性pop，对象不可扩展 - zone.js：2228

经过简短的调查后，我阅读了关于冻结对象的doc，并发现代码将这些消息抛出到chartsJs node_module文件夹中，但我真的不知道如何解决这个问题。

这是图表标记：

<canvas mdbChart *ngIf="chartsData.length >= 1"
    [chartType]="chartType"
    [datasets]="chartsData" 
    [labels]="xLabels"
    [colors]="chartColors"
    [options]="chartOptions"
    [legend]="chartsData && chartsData.length >= 1"
    (chartHover)="chartHovered($event)" 
    (chartClick)="chartClicked($event)">
</canvas>

这是ts文件的一部分：

@Input() chartData: Array<object>; 
@Input() xLabel: Array<string>; 
xLabels: Array<string>; 
chartsData: Array<object>; 

ngOnChanges(changes: SimpleChanges) {
    if( changes.xLabel && changes.xLabel.currentValue.length > 0 && changes.chartData && changes.chartData.currentValue.length > 0 ){
        this.chartsData = changes.chartData.currentValue.map(item => Object.assign({}, item));
        /** this workaround solves a mdb library bug  not updating xAxis label*/
        setTimeout(function () {
            this.xLabels = changes.xLabel.currentValue.slice(0);
        }.bind(this), 0);
    }
}

如上所示，我试图克隆输入对象（它们都来自ngRx状态），但它没有解决问题。

我很乐意提供任何所需信息。我很抱歉，如果这不是一个可行的例子，但你可能知道它需要大量的文件来制作一个有角度的5个工作示例xD

使用chartsJs

0 个答案: