Question

以下是我的代码：

this.service.content(data).subscribe(
  data => {
        this.array1= data.Result;
        this.array2= data.Result;
        /* Adding Additional Properties */
        this.array2.forEach(function(el:any){
          el.isActive = false;
        });
  }

如何在代码中看到，将项添加到array2。不幸的是，该项目也被添加到array1中。请提供解决方案，以便在不影响array1值的情况下向array2添加属性。

我还尝试将slice属性设置为data.Result，但它并没有像预期的那样工作。

Answer 1

这应该按预期工作：

this.service.content(data).subscribe(
  data => {
    this.array1 = data.Result;

    this.array2 = this
      .array1
      .map(el => Object.assign({}, el, { isActive: false }));
  }

编辑：
如果您使用Typescript 2.1 or +，您还可以使用对象上的展开运算符：

this.service.content(data).subscribe( data => { this.array1 = data.Result; this.array2 = this .array1 .map(el => ({...el, isActive: false })); }

Answer 2

分配数组不会复制数组。你这样做的方式，你创建了两个指向同一个数组的指针。更改一个指针会更改原始数组。我的观点是：

data: any[];
array1: any[];
array2: any[];
data = ["1", "2"];
this.array1 = this.data;
this.array2 = this.data;

this.array1[0] = "3";

这将改变原始数组数据，并将位置0置于值3。

你应该复制数组而不是分配它。

您可以找到here个好示例

Answer 3

假设您使用的是ES6，则可以使用load lodash进行深层复制

object.assign

或使用this.array1= data.Result.map(function(obj) { Object.assign({}, obj) }) this.array2= data.Result.map(function(obj) { Object.assign({}, obj) })

{{1}}

获取数组的副本而不影响Angular 2中的原始数组

3 个答案: