Значение TEMP_DATA должно быть таким же, но меняется - PullRequest
Новая
       5

Значение TEMP_DATA должно быть таким же, но меняется

1 голос
/ 28 мая 2020

В моем приложении у меня есть одна функция под фильтром TEMP_DATA (который имеет нефильтрованный список), чем перерисовка диаграммы с этим фильтром. Она работает для первого фильтра, но во второй раз не работает, потому что el.TEMP_DATA также меняется хотя он должен быть таким же.

Stackblitz Demo 

perSelect(org){
    this.reports.filter(x=>x.TITLE==org).forEach(el=>{  
       el.chartOptions.series[0].data= el.c_personel.length!=0 ? el.TEMP_DATA.filter(y=>el.c_personel.map(x=>{return x.id}).join(",").includes(y.sicil)) : el.TEMP_DATA 
       el.updateFromInput = true;
   }) 
}

это тоже мой класс 

export class Oxy{
    public TITLE:string;
    public highcharts:typeof Highcharts=Highcharts;
    public chartOptions:Highcharts.Options; 
    public TEMP_DATA=[];
    public PERSONELLER=[];
    public c_personel=[];
}

c_personel заполняется раскрывающимся списком. PERSONELLER и TEMP_DATA заполняются при загрузке страницы. Что может быть вызвано изменением TEMP_DATA?

Поскольку я контролирую проблему с series: [{ data: datas, type: "scatter" }], это также обновляет TEMP_DATA

Я хочу обновить график, связанный с фильтром людей. График показывает результат отобранных сотрудников. Если ничего не выбрано, показать все данные.

Заранее спасибо

Ответы [ 2 ]

4 голосов
/ 28 мая 2020

Проблема возникает из-за того, что метод копирования по умолчанию неглубокий. Таким образом, помимо примитивных типов данных, изменения в других типах, таких как массивы или JSON объекты при неглубоком копировании, отразятся на исходной переменной.

Итак, попробуйте методы глубокого копирования, такие как JSON.parse(JSON.stringify(value)); или let var2 = [...var1];

Возможно, измените ссылку на параметры диаграммы.

1 голос
/ 28 мая 2020

Попробуйте изменить свой метод на 

perSelect(org){
    this.reports.filter(x=>x.TITLE==org).forEach(el=>{ 
      let that=this, datas=[], temp = JSON.parse(JSON.stringify(el.TEMP_DATA));
      if(el.c_personel.length!=0){ var datas=temp.filter(y=>el.c_personel.map(x=>{return x.id}).join(",").includes(y.sicil)) }else{datas=temp;}  
      el.chartOptions = {
        chart: {  backgroundColor: "transparent" },
        title: { text: '' }, credits: { enabled: false }, legend: { enabled: false },
        yAxis: { max: 100, min:0, title: { text: 'Verimlilik - Performans - Kalite (PVK)'}},
        xAxis: { max: 100,  min:0,  title: {  text: 'Davranış'}},
        tooltip: { formatter: function () {return this.point.name+'<br/>' + 'Davranış: <b>'  + this.y + '</b>'+'<br/>'+  'PVK: <b>' + this.x +'</b> <br/>'+ 'Pozisyon: <b> '+this.point.position+'</b> <br/>'+'Departman:  <b> '+this.point.organization+'</b> <br/>' } },
        plotOptions: { series: {  cursor: 'pointer',   events: {  click: function (event) {  that.personelDetay( this.options.sicil)}}}},
        series: [{ data: datas, type: "scatter" }]
      }; 
    }) 
  }
...