Angular 8 Plotly-图表作为类getter冻结页面

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。Janis Jansen想要引起更多关注对此问题。

我正在Angular 8项目中使用plotly.js-(basic-dist-min) v1.52.2和angular-plotly.js v1.5.0。一切工作正常，唯一的例外是，如果我返回“图形对象”，则来自吸气剂的数据数组和布局将冻结网页。我想这是因为尽管我无法检查，因为devtools也被冻结了，但由于plotly经常调用getter。吸气剂很简单：

public get chart(): { data: any, layout: any } | null {
    const data = computeSomeChartData(); // just one array filter

    return { data: [...], layout: {...} }
    // return null if no data
}

模板看起来像：

<plotly-plot
    [data]="chart.data"
    [layout]="chart.layout"
    [config]="{ displayModeBar: false }"
    [useResizeHandler]="true"
    width="100%"
    height="100%"
    *ngIf="chart !== null"
></plotly-plot>

我如何保持图表作为吸气剂，但防止页面冻结？ （最好没有超时或类似情况。）

Answer 1

从您共享的内容来看，问题似乎可能是由于您的getter一直在返回新对象的方式。尝试将图表数据存储在一些内部变量中，然后返回它，这应该可以解决您的问题。

仅供参考，可能类似于：

private computedChart?: { data: any, layout: any };

public get chart(): { data: any, layout: any } | null {
    if (!this.computedChart) {
        const data = computeSomeChartData();
        this.computedChart = { data: [...], layout: {...}  };
    }

    return this.computedChart;
}