Angular 8 Plotly - диаграмма как классный получатель замораживает страницу

Question

Я использую plotly.js-(basic-dist-min) v1.52.2 и angular-plotly.js v1.5.0 внутри Angular 8 Project. Все работает нормально, за исключением того, что если я возвращаю «объект графа», то массив данных и макет из геттера, веб-страница зависает. Я предполагаю, что это потому, что заговор часто вызывает геттера, хотя я не могу проверить, потому что devtools также заморожены. Получатель прост:

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

Из того, что вы поделились, похоже, что проблема может быть связана с тем, как ваш получатель постоянно возвращает новый объект. Попытайтесь сохранить данные диаграммы в некоторой промежуточной переменной и вернуть ее, и это должно исправить вашу проблему.

Просто для справки, это может быть что-то вроде:

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