0

My stackblitz link (Please bare with my UI. I have created it just to understand the concept)

When I choose 'Select all' and then start deselecting A,B,... , the elements are getting spliced from the mainList. But in my typescript file I have spliced the element only from the filteredList and not from my mainList. Kindly explain how removing an element from the filteredList also removes it from mainList. Am I doing anything wrong here? Or If this is the functionality which could not be changed, how could I reserve my mainList without getting sliced.

I have checked with below links. But they didn't work

James Z
  • 12,209
  • 10
  • 24
  • 44
Dev Anand
  • 314
  • 1
  • 14

3 Answers3

1

When you are assigning this.mainList to this.filteredList you are copying the reference. So any actions you perform on one list will affect the other.

Instead you should take a copy of the array by using slice.

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

Note - the object references inside the arrays are still the same - so any actions you perform on the inner objects will be reflected in both lists.

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);

EDIT

While this is one part of your issue, you are still copying your main array reference in other parts of your code.

I would recommend starting again with a different approach. Here's my very simplified version, albeit without "Select All" functionality: https://stackblitz.com/edit/angular-ihkbfn

Kurt Hamilton
  • 12,490
  • 1
  • 24
  • 40
  • Looking at your stackblitz in more detail, I think you have other issues. I've simplified your example here: https://stackblitz.com/edit/angular-ihkbfn. I removed the "Select all" functionality, but that should be simple enough to add back in – Kurt Hamilton Mar 15 '20 at 10:15
1

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

after this perform all the operation on filteredlist as this will make a deep copy of the array

Amey
  • 795
  • 8
  • 31
0

Please try with the Spread Operator in TypeScript, I think that will solve your issue.

In TypeScript, the spread operator (in form of ellipsis) can be used to initialize arrays and objects from another array or object. You can also use spread operator for object destructuring.

Just one example, Initialize arrays another array and then slice that new itilialized array

Initialize arrays another array

You can use spread operator to create arrays from existing arrays in given fashion.

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
Mile Mijatović
  • 2,948
  • 2
  • 22
  • 41