Reversing ngModel modifications does not accurately display changes in the view

Question

Reversing ngModel modifications does not accurately display changes in the view

Presently, my table contains editable cells, with the functionality to undo changes to each cell. To achieve this, I initially created a duplicate of each object in the array.

Upon initialization, I mapped the array to create a new array with old values stored in a separate property:

this.previousArr = this.mainArr.map(item => {
  item.oldValues = Object.assign({}, item);
  return item;
})

When the cancel action is triggered, I restore the cell's old values instead of the new ones:

cancel(action) {  
   action = Object.assign({}, action.oldValues);
}

However, after testing out this implementation in stackblitz, I noticed that while the values revert back to the old ones in the console, they don't reflect in the actual view. Can you help identify the issue here?

angular typescript

Answer 1

Answer №1

The reason for this occurrence is due to the item you provide to the cancel function possessing a distinct reference from the one in your temp.

One approach that may resolve this issue is as follows:

  cancel(item) {
    const {name, city} = item.oldValues; 
    this.mapedArr[this.mapedArr.indexOf(item)] = {...this.mapedArr[this.mapedArr.indexOf(item)], name, city} 
  }

Feel free to check out the updated version on your Stackblitz

Answer 2

The reason for this occurrence is due to the item you provide to the cancel function possessing a distinct reference from the one in your temp.

One approach that may resolve this issue is as follows:

  cancel(item) {
    const {name, city} = item.oldValues; 
    this.mapedArr[this.mapedArr.indexOf(item)] = {...this.mapedArr[this.mapedArr.indexOf(item)], name, city} 
  }

Feel free to check out the updated version on your Stackblitz

Answer 3

Answer №2

To achieve success, make sure to modify the element within the array you are currently iterating over.

Here is the updated StackBlitz for reference:

https://stackblitz.com/edit/angular-jk8es9?file=src%2Fapp%2Fapp.component.ts

Answer 4

To achieve success, make sure to modify the element within the array you are currently iterating over.

Here is the updated StackBlitz for reference:

https://stackblitz.com/edit/angular-jk8es9?file=src%2Fapp%2Fapp.component.ts

Answer 5

Answer №3

Avoid the use of object.assign in this scenario as the name is being placed in another property called oldValue.

  constructor() {
    this.mapedArr = this.arr.map(i => {
      i.oldValues = i.name
      return i;
    })
    console.log('this.mapedArr ', this.mapedArr);
  }

  cancel(i) {
    console.log('i new', i);
    i.name =  i.oldValues 
    console.log('i old', i);
  }

See the Demo

Answer 6

Avoid the use of object.assign in this scenario as the name is being placed in another property called oldValue.

  constructor() {
    this.mapedArr = this.arr.map(i => {
      i.oldValues = i.name
      return i;
    })
    console.log('this.mapedArr ', this.mapedArr);
  }

  cancel(i) {
    console.log('i new', i);
    i.name =  i.oldValues 
    console.log('i old', i);
  }

See the Demo

Answer 7

Answer №4

your component:

  constructor() {
     this.copyOfArr = JSON.parse(JSON.stringify(this.arr));
     console.log('this.copyOfArr ', this.copyOfArr);
  }

 undoChanges(i) {
     this.copyOfArr[i] = JSON.parse(JSON.stringify(this.arr[i]));
 }

your html:

<p *ngFor="let i of copyOfArr; let ind = index">
   Name: {{i.name }}<br>
   City: {{ i.city }}<br>
   <input type="text" [(ngModel)]='i.name' /><br>
   <button (click)='undoChanges(ind)'>Undo Changes</button>
<br>
<br>
</p>

Answer 8

your component:

  constructor() {
     this.copyOfArr = JSON.parse(JSON.stringify(this.arr));
     console.log('this.copyOfArr ', this.copyOfArr);
  }

 undoChanges(i) {
     this.copyOfArr[i] = JSON.parse(JSON.stringify(this.arr[i]));
 }

your html:

<p *ngFor="let i of copyOfArr; let ind = index">
   Name: {{i.name }}<br>
   City: {{ i.city }}<br>
   <input type="text" [(ngModel)]='i.name' /><br>
   <button (click)='undoChanges(ind)'>Undo Changes</button>
<br>
<br>
</p>

Reversing ngModel modifications does not accurately display changes in the view

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Oops! Looks like there's an issue with the type error: value.forEach is

Guide on integrating react-tether with react-dom createPortal for custom styling of tethered components based on their target components

Clear out the existing elements in the array and replace them with fresh values

Type of object is unidentified in Vuejs with Typescript error code ts(2571)

The ability of Angular 4 ngComponentOutlet to load dynamic components is great, however, there seems to be an issue

Steps for adding Node modules to a Nexus private repository

Unregistered outlet name unrecognized

Jasmine: utilizing unit test to spy on the invocation of a nested function

Having trouble installing Angular 2 with npm?

Generating ambient module declarations in Typescript for distribution on NPM

Ensuring the Current Page is Valid Before Progressing to the Next Step in Angular-Archwizard

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

Passing data from child to parent in Angular using EventEmitter

Protractor experiencing difficulty recognizing Angular functionality

Having trouble utilizing datepipe with locale format

Restricted inclusive collection utilizing embedded identifier

How to display placeholder text on multiple lines in Angular Material's mat form field

Expanding material UI theme choices through module augmentation is currently ineffective with TypeText

Encountering a node-sass problem during npm installation in my Angular project on Mac OS

Error occurring with the gulp task runner