angular2是否支持每个循环？如是！那么，为什么它打印所有具有相同值的Object？

Question

伙计们我正在尝试获取服务器响应对象。并将其传递给一个新的Array对象，如下面的代码所示。但是，我遇到的问题是当我尝试使用forEach循环打印那些新传递的对象时。它显示重复的对象。如何克服这个问题呢。

  //This is the my newly created Object with following properties
  obj: Object = new Object({
                           value:"",
                           label:"",
                           percentage: "",
                           color:"",
                           highlight: "" });

  data: Array<Object> = []; // This is a array object to which i need to pass my newly created object with respective properties as shown above.

 // This is the code to get response object from server and pass those all response object into newly created object called "obj" using for-each in angular 2

this.trafficChartService.getChartDetails().subscribe(response =>{
  this.myRes = response.sectionPercentage;
  this.myRes.forEach(ele =>{
    let dashboardColors = this._baConfig.get().colors.dashboard; 
    this.obj.value = ele.value;
    this.obj.label = ele.label;
    this.obj.percentage = ele.percentage;
    this.obj.color = dashboardColors.gossip;
    this.obj.highlight = colorHelper.shade(dashboardColors.gossip, 15);
    this.data.push(this.obj);// Here's the problem
  });
  console.log(this.data); // ***
})

// Here's the snapshot of those object which i printed in *** above

Answer 1

问题是你每次都在改变SAME对象！

this.obj.value = ele.value; // <<<< this will override the pushed ones!!
this.obj.label = ele.label; // <<<< this will override the pushed ones!!
this.obj.percentage = ele.percentage; // <<<< this will override the pushed ones!!
this.obj.color = dashboardColors.gossip; // <<<< this will override the pushed ones!!
this.obj.highlight = colorHelper.shade(dashboardColors.gossip, 15); // <<<< this will override the pushed ones!!
this.data.push(this.obj);// Here's the problem

应该是这样的：

this.obj = new Object({
                       value:"",
                       label:"",
                       percentage: "",
                       color:"",
                       highlight: "" });
this.obj.value = ele.value;
this.obj.label = ele.label;
this.obj.percentage = ele.percentage;ones!!
this.obj.color = dashboardColors.gossip;pushed ones!!
this.obj.highlight = colorHelper.shade(dashboardColors.gossip, 15);
this.data.push(this.obj);// Here's the problem

Answer 2

  this.myRes.forEach(ele =>{
    let dashboardColors = this._baConfig.get().colors.dashboard; 
    // here you are re-using the same object instance every time
    this.obj.value = ele.value;
    this.obj.label = ele.label;
    this.obj.percentage = ele.percentage;
    this.obj.color = dashboardColors.gossip;
    this.obj.highlight = colorHelper.shade(dashboardColors.gossip, 15);
    // here the same object gets added every time
    this.data.push(this.obj);// Here's the problem
  });
  console.log(this.data); // ***
})

因为你每回合使用相同的对象实例，结果是一个数组，其中相同的对象被添加了x次。

这应该做你想要的：

  this.myRes.forEach(ele =>{
    let dashboardColors = this._baConfig.get().colors.dashboard; 
    var obj = {};
    obj.value = ele.value;
    obj.label = ele.label;
    obj.percentage = ele.percentage;
    obj.color = dashboardColors.gossip;
    obj.highlight = colorHelper.shade(dashboardColors.gossip, 15);
    this.data.push(obj);// Here's the problem
  });
  console.log(this.data); // ***
})