When using Angular 2, the array.splice() function is causing the elements to be removed from the

Question

When using Angular 2, the array.splice() function is causing the elements to be removed from the

I am currently working with an HTML table that has default checked rows.

<table>
    <tr>
        <th></th>
        <th>Id</th>
        <th>Name</th>
        <th>Initial</th>
    </tr>
    <tr *ngFor="let name of names; let i = index">
        <td><input type="checkbox" [checked]="chk" (change)="onTaChange(name, $event.target.checked,i)"></td>
        <td>{{name.id}}</td>
        <td>{{name.Fname}}</td>
        <td>{{name.Initial}}</td>
    </tr>
</table>

I have created another array to store unchecked/checked objects. In the onTaChange() method, I pass the index in splice() to remove the object at that index (unchecked row in the table). However, the rows(objects) are getting removed even if they belong to different arrays of objects.

My goal is to have a second array containing only the checked/unchecked rows of objects. Can anyone provide assistance with this?

Plunker

javascript angular typescript

Answer 1

Answer №1

Explanation: Arrays store references, which means that when you create the following:

alteredNames:string[]=this.names;

alteredNames is not a brand new array but rather a reference to the original array, so any changes made in either array will be reflected in both.

Resolution: To avoid this issue, make a deep copy of the array by using _.cloneDeep(this.name).

Answer 2

Explanation: Arrays store references, which means that when you create the following:

alteredNames:string[]=this.names;

alteredNames is not a brand new array but rather a reference to the original array, so any changes made in either array will be reflected in both.

Resolution: To avoid this issue, make a deep copy of the array by using _.cloneDeep(this.name).

Answer 3

Answer №2

When it comes to copying an array, there are various modern methods available:

loop
Array.from
Array.slice
Array.concat
JSON.parse(JSON.stringify(arr))
[...arr] from ES6

However, most of these methods do not create a new instance for the new array, with the exception of loop or Array.concat(). Therefore, in your situation, you will need to use either the loop method using Array.forEach and Array.push, or the Array.concat() method to copy the array.

Here is a helpful plunker for reference. I hope this information proves useful.

Answer 4

When it comes to copying an array, there are various modern methods available:

loop
Array.from
Array.slice
Array.concat
JSON.parse(JSON.stringify(arr))
[...arr] from ES6

However, most of these methods do not create a new instance for the new array, with the exception of loop or Array.concat(). Therefore, in your situation, you will need to use either the loop method using Array.forEach and Array.push, or the Array.concat() method to copy the array.

Here is a helpful plunker for reference. I hope this information proves useful.

Answer 5

Answer №3

When utilizing the same reference and passing the entire array to your OnTaChange method

The slice() method can be used to make a clone of the array object

this.alteredNames=this.names.slice(0);

Additionally, as Pankaj mentioned,

this.alteredNames=Object.assign([], this.names)

In addition to the above methods, a fantastic 3rd party library can also achieve similar results,

export class App {
  chk:boolean = true;
  names:string[] = [
    {
      "Fname": "Bunty",
      "id": "1",
      "Initial":"G"
    },
    {
      "Fname": "Ronny",
      "id": "2",
      "Initial":"K"
    },
    {
      "Fname": "Sam",
      "id": "3",
      "Initial":"P"
    },
    {
      "Fname": "James",
      "id": "4",
      "Initial":"M"
    }
    ];
    alteredNames:string[];
  constructor() {
   this.alteredNames=_.clone(this.names) //////////this works
   // or
   this.alteredNames=_.cloneDeep(this.names) // will also work. 
  }

  onTaChange(name:string, $event.target.checked:boolean,i:number){
    if(!checked){
      this.alteredNames.splice(i,1); 
      console.log(this.alteredNames);
    }
    else{
      this.alteredNames.push(name);
    }
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Lodash should be included from this CDN as shown below

Updated Plunker

Furthermore,

Answer 6

When utilizing the same reference and passing the entire array to your OnTaChange method

The slice() method can be used to make a clone of the array object

this.alteredNames=this.names.slice(0);

Additionally, as Pankaj mentioned,

this.alteredNames=Object.assign([], this.names)

In addition to the above methods, a fantastic 3rd party library can also achieve similar results,

export class App {
  chk:boolean = true;
  names:string[] = [
    {
      "Fname": "Bunty",
      "id": "1",
      "Initial":"G"
    },
    {
      "Fname": "Ronny",
      "id": "2",
      "Initial":"K"
    },
    {
      "Fname": "Sam",
      "id": "3",
      "Initial":"P"
    },
    {
      "Fname": "James",
      "id": "4",
      "Initial":"M"
    }
    ];
    alteredNames:string[];
  constructor() {
   this.alteredNames=_.clone(this.names) //////////this works
   // or
   this.alteredNames=_.cloneDeep(this.names) // will also work. 
  }

  onTaChange(name:string, $event.target.checked:boolean,i:number){
    if(!checked){
      this.alteredNames.splice(i,1); 
      console.log(this.alteredNames);
    }
    else{
      this.alteredNames.push(name);
    }
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Lodash should be included from this CDN as shown below

Updated Plunker

Furthermore,

When using Angular 2, the array.splice() function is causing the elements to be removed from the

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring that the field remains active in Angular2 even after editing it with a value

The attribute 'randomUUID' is not found within the 'Crypto' interface

What purpose does the pipe method serve in RxJS?

Uploading data through AJAX without saving it in the database

Customize the columns of your Angular Material 2 table by defining them using TemplateRef and ngTemplateOutlet

What is the best way to import multiple classes from a module folder in Angular2 using TypeScript?

Animate the parent container of ng-view in Angular by targeting an element within ng-view

Error: The plugin "videoJsResolutionSwitcher" could not be located on AngularCli platform

The function RegisterOnChange is not a valid function

Django and VueJS: Error 403 - Forbidden request due to missing or incorrect CSRF token

It appears that the crackling noise is being generated by AudioContext.decodeAudioData

Implementing the row delete function in MUI DataGrid using JavaScript

Add owl carousel to your npm project in any way you see fit

An error is anticipated when () is added, but surprisingly, I still encounter an error as well. This issue arises in React-Native and Typescript

Initiate a POST request to download the file upon clicking the button

Could someone assist me in understanding why VScode is displaying an error stating it cannot locate a module?

Tips for automatically resizing a canvas to fit the content within a scrollable container?

What is the method for displaying html files in a POST request?

The paths specified in Node.js and Express are having difficulty finding the resource files for CSS and JavaScript

Unable to properly test the functionality of the material-ui select component due to an error being thrown stating that the function is not being called