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

Question

我使用plotly.js-(basic-dist-min) v1.52.2和angular-plotly.js v1.5.0一个角8项目中。一切正常，唯一的例外是如果我返回“图形对象”，那么来自 getter 的数据数组和布局，网页会冻结。我想这是因为 plotly 经常调用 getter，但我无法检查，因为 devtools 也被冻结了。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;
}