删除 yAxis 时留下一些循环迭代 - Highcharts/Angular

Question

我正在尝试从图表中删除数据（yAxis/series），但我不明白为什么我的代码无法正常工作。我正在使用图表将 Observable 数据从父组件发送到子组件。我有 2 个有效或无效的代码。在我看来，使用 remove(true) 同步 forEach 循环存在问题。

我的意思是。当我使用 forEach() 或 for() 循环并尝试删除 yAxis 时，会错过一些循环迭代，并且图表不会删除所有数据。

另一方面，如果我使用 setTimeout() 和 remove(true)，问题就解决了，一切都在删除。任何想法是什么问题？

可行的代码：

    this.chart.series.forEach((serie: Highcharts.Series) => {
        if (!this._series.has(serie.options.id)) {
            const yAxis = this.chart.get(serie.options.id) as Highcharts.Axis;
            if (yAxis) {
                 setTimeout(() => {
                     yAxis.remove(true);
                 });
            }
        }
    });

破码：

        this.chart.series.forEach((serie: Highcharts.Series) => {
            if (!this._series.has(serie.options.id)) {
                const yAxis = this.chart.get(serie.options.id) as Highcharts.Axis;
                if (yAxis) {
                    yAxis.remove(true);
                }
            }
        });

第一个工作正常。我正在寻找为什么当我不使用 setTimeout() 时循环的迭代丢失的答案。同步有问题吗？

感谢您的回答。

Answer 1

这是通过循环从数组中删除元素的经典问题。当您使用带有redraw 参数的remove 方法时，数组将被重新索引。

请查看这个实时示例：http://jsfiddle.net/BlackLabel/fy97u2bv/

解决办法是向后循环：

for (var i = chart.yAxis.length-1; i >= 0; i--) {
    chart.yAxis[i].remove();
}

---

现场演示： http://jsfiddle.net/BlackLabel/4dt6xjvk/