Angular 8 Plotly - 图表 class getter 冻结页面

Question

我在 Angular 8 项目中使用 plotly.js-(basic-dist-min) v1.52.2 和 angular-plotly.js v1.5.0。一切正常，唯一的例外是如果我 return "graph object"，那么来自 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>

如何将图表保持为 getter，同时防止页面冻结？（最好没有超时或类似的东西。）

Answer 1

从您分享的内容看来，问题可能是由于您的 getter 一直 return 创建新对象的方式所致。尝试将您的图表数据存储在一些中间变量中，然后 return 它应该可以解决您的问题。

仅供参考，可能是这样的：

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;
}

Angular 8 Plotly - 图表 class getter 冻结页面

Angular 8 Plotly - chart as class getter freezes page

getter

plotly

angular

plotly.js