Question

我有一个项目表，并且表单元格可以内联编辑。我想实现一个功能来撤消对每个单元格的更改，因此我在开始时就复制了数组的每个对象。

this.mapedArr = this.arr.map(i => {
  i.oldValues = Object.assign({}, i);
  return i;
})

然后单击“取消”，然后复制旧值而不是新值。

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

如果您勾选了stackblitz（我尝试在其中实现一个小例子），则可以在控制台中看到这些值变回了旧值，但没有反映出结果。视图。问题出在哪里？

Answer 1

之所以会发生这种情况，是因为您传递给cancel函数的项目具有与您的temp中的项目不同的参考。

您能想到的是这样的：

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

Here's an update version of your stackblitz

Answer 2

由于您将名称放入另一个属性调用object.assign中，因此无需使用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);
  }

Demo

Answer 3

更新要循环的数组中的元素，它将起作用

请找到更新的Stackblitz

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

Answer 4

您的组件：

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

 cancel(i) {
     this.mapedArr[i] = JSON.parse(JSON.stringify(this.arr[i]));
 }

您的html：

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

撤消ngModel的更改不会在视图中反映结果

4 个答案: