系列在发送到直方图组件之前未获得更新

Question

我在angular 4应用程序中实现了直方图高图组件。我删除了系列功能。单击删除按钮后，我可以看到值映射中的值包含系列减去已删除的序列，但我通过重绘发送的系列包含已删除的序列。我不确定这是怎么回事。

如果你看到代码@Input（）中的值设置了endingResults（value：Array），它包含正确的值，但是我在这里传递的代码下面的代码.chartseries包含删除的那个

角度分量

import { Component, Input, ViewChild } from '@angular/core';
import { EndingSurplus } from '../../../../api/dtos';
import { HistogramChartComponent } from '../../../../shared/Highcharts/histogram/histogram-chart.component';

@Component({
  selector: 'app-ending-surplus-analysis',
  templateUrl: './ending-surplus-analysis.component.html'
})
export class EndingSurplusAnalysisComponent {
  isExpanded = false;
  showTable = true;
  @ViewChild(HistogramChartComponent) public endingHistogramChart: HistogramChartComponent;

  public chartSeries: any[] = [];
  public chartSeries1: any[] = [];

  private results: Array<EndingSurplus> = [];

  @Input() set endingResults(value: Array<EndingSurplus>) {
    let objHistogram = null;
    let objectData = null;
    this.results = value;

    this.chartSeries1 = value.map((element, idx) => {

      objHistogram = {
        name: element.strategyName,
        color: element.strategyColor,
        type: 'histogram',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 's' + idx,
        zIndex: -1,
        binWidth: Math.round((Math.max.apply(null, element.data) - Math.min.apply(null, element.data)) / 40)
      };
      objectData = {
        name: 'Data' + idx,
        showInLegend: false,
        data: element.data,
        id: 's' + idx,
      };

      this.chartSeries[2 * idx] = objHistogram;
      this.chartSeries[2 * idx + 1] = objectData;


    });
    if (this.endingHistogramChart) this.endingHistogramChart.redraw(this.chartSeries);
  }

  constructor() { }

}

直方图组件

import { Component, Input, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ShortNumberFormatPipe } from '@wtw/toolkit';

@Component({
    selector: 'histogramchart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class HistogramChartComponent implements OnInit {
    static chart(shortNumberFormatPipe: ShortNumberFormatPipe, translate: TranslateService) {
        return {
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            chart: {
                type: 'histogram'
            },
            legend: {
                layout: 'horizontal',
                margin: 25,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20,
                useHTML: true,
                title: {
                    text: translate.instant('CAPTIVES.RESULTS.COMMON.GRAPH_LEGEND_TITLE') + ' &nbsp;',
                    margin: 50,
                    style: {
                        fontStyle: 'italic',
                        fontWeight: 'normal',
                        margin: 20
                    }
                },
                align: 'right',
                verticalAlign: 'bottom',
            },

            plotOptions: {
                series: {
                    events: {
                        legendItemClick: function () {
                            for (let i = 0; i < this.chart.series.length; i++) {
                                if (this.chart.series[i].index !== this.index) {
                                    this.chart.series[i].setVisible(false, false);
                                } else {
                                    this.chart.series[i].setVisible(true, false);
                                }
                            }
                            this.chart.redraw();
                            return false;
                        }
                    }

                }

            },

            tooltip: {
                shared: true,
                useHTML: true,

                formatter: function () {
                    let isMillionNumber: boolean = false;
                    const row = function (label, value) {
                        const key = 'CAPTIVES.RESULTS.ESA.';

                        return '<tr><td style="font-size:10px;">' + translate.instant(key + label) + ': </td>'
                            + '<td style="font-size:10px;"><b>' + value + '</b></td></tr>';
                    };

                    const transformNumber = function (value) {
                        isMillionNumber = validateMillionNumber(value);
                        if (isMillionNumber)
                            return shortNumberFormatPipe.transform(value, 2);
                        else
                            return shortNumberFormatPipe.transform(value, 0);
                    };

                    const table = function (format, point) {
                        let txt = '<strong style="font-size:12px;color:' + point.series.color + '">' + point.series.name + '</strong><br><br>';
                        txt += '<table>';
                        txt += row('GRAPH_XAXIS', format(point.x));
                        txt += row('GRAPH_YAXIS', format(shortNumberFormatPipe.transform(point.y)) + ' counts');
                        txt += '</table>';
                        return txt;
                    };

                    let point = this.points[0].point;

                    return table(transformNumber, point);

                    function validateMillionNumber(millionNumber: number) {
                        return millionNumber >= 1000000;
                    }

                },

            },

            xAxis: [{
                title: { text: '' },
                alignTicks: false
            }, {
                title: { text: translate.instant('CAPTIVES.RESULTS.ESA.GRAPH_XAXIS') },
                alignTicks: false,

            }],

            yAxis: [{
                title: { text: '' }
            }, {
                title: { text: translate.instant('CAPTIVES.RESULTS.ESA.GRAPH_YAXIS') },

            }],
            series: [{
                showInLegend: false
            }]
        };
    }
    public options: any;
    chart: any;
    @Input() public series: any;
    private shortNumberFormatPipe = new ShortNumberFormatPipe();
    constructor(private _translate: TranslateService) {
    }

    ngOnInit() {
        this.options = HistogramChartComponent.chart(this.shortNumberFormatPipe, this._translate);
    }

    getInstance(chartInstance): void {
        this.chart = chartInstance;
        this.redraw(this.series);
    }

    ngOnChanges(data: any) {
        if (!data.series.currentValue) return;
        this.redraw(data.series.currentValue);
    }

    public redraw(series: any) {
        if (!this.chart) return;

        let seriesLength = this.chart.series.length;
        for (let i = seriesLength - 1; i > -1; i--) {
            this.chart.series[i].remove();
        }

        series.map(s => {
            if (s !== null) {
                this.chart.addSeries(s);
            }
        });

        for (let i = 0; i < this.chart.series.length; i++) {
            if (i > 0) {
                this.chart.series[i].setVisible(false, false);
            } else {
                this.chart.series[i].setVisible(true, true);
            }
        }
        this.chart.redraw();
    }
}