如何在不干扰主数组的情况下以 7 角拼接数组中的元素

Question

我的stackblitz link（请裸露我的用户界面。我创建它只是为了理解这个概念）

当我选择“全选”然后开始取消选择 A,B,... 时，元素将从 mainList 中拼接。但是在我的打字稿文件中，我只从过滤列表而不是我的主列表中拼接了元素。请解释如何从过滤列表中删除元素也将其从主列表中删除。我在这里做错什么了吗？或者如果这是无法更改的功能，我怎么能保留我的 mainList 而不会被切片。

我已检查以下链接。但他们没有工作

• Cloning an array in Javascript/Typescript

• Copy array of Objects in angular 2

Answer 1

当您将this.mainList 分配给this.filteredList 时，您正在复制引用。因此，您对一个列表执行的任何操作都会影响另一个列表。

您应该使用 slice 获取数组的副本。

this.filteredList=this.mainList.slice();

注意 - 数组中的对象引用仍然相同 - 因此您对内部对象执行的任何操作都将反映在两个列表中。

const arr1 = [1,2,3];
const arr2 = arr1;

arr2[1] = 4;

console.log('update reference');
console.log(arr1, arr2);

const arr3 = arr1.slice();
arr3[1] = 2;

console.log('update slice');
console.log(arr1, arr3);

编辑

虽然这是您的问题的一部分，但您仍在代码的其他部分复制主数组引用。

我建议使用不同的方法重新开始。这是我非常简化的版本，尽管没有“全选”功能：https://stackblitz.com/edit/angular-ihkbfn

Answer 2

请尝试在 TypeScript 中使用 Spread Operator，我认为这会解决您的问题。

在 TypeScript 中，展开运算符（以省略号的形式）可用于从另一个数组或对象初始化数组和对象。您还可以使用扩展运算符进行对象解构。

只是一个例子，初始化数组另一个数组，然后切片这个新的 itilialized 数组

初始化数组另一个数组

您可以使用扩展运算符以给定方式从现有数组创建数组。

let origArrayOne = [ 1, 2, 3];                          //1,2,3
let origArrayTwo = [ 4, 5, 6];                          //4,5,6

//Create new array from existing array
let copyArray = [...origArrayOne];                      //1,2,3

//Create new array from existing array + more elements
let newArray `enter code here`= [...origArrayOne, 7, 8];             //1,2,3,7,8 

//Create array by merging two arrays
let mergedArray = [...origArrayOne, ...origArrayTwo];   //1,2,3,4,5,6

Answer 3

this.filteredList = this.mainList.map(ele=>{return ele});

在此之后对过滤列表执行所有操作，因为这将制作数组的深层副本