Angular2：放弃文本输入中的更改后更新视图

我有一个文本区域数组，可以单独更新，更改可以保存或丢弃。每个文本区域由一个对象表示，用于跟踪更改并启用/禁用某些按钮。一切正常，但放弃后，对象不会更改，但视图不会更新。它只会在我更改对象内部的某些内容时更新，因此我尝试创建对象的“真实”副本并将这些值指定给实际对象，但这也不起作用。 到目前为止，我的代码是：

HTML:

保存更改
放弃更改

组成部分：

    itemIds = [2,4];

  myMessages = [
    {
      id: 2,
      message: 'hello',
      changedText: false
    },
    {
      id: 4,
      message: 'world',
      changedText: false
    }
  ]

enableButton(itemId){
    this.myMessages.map( y => {if (y.id === itemId) {
      y.changedText = true;
    }});
  }

getMessageDetails(itemId){
    let myMessage = this.myMessages.find(y => y.id === itemId);
    return myMessage;
  }

saveMessageChanges(itemId, message){
    this.myMessages.map( y => {if (y.id === itemId) {
      y.message = message;
      y.changedText = false;
    }});
  }
discardChanges(itemId){
    let tempMessage = Object.assign({},(this.myMessages.find(y => y.id === itemId)));

    let myMessage = this.myMessages.find(y => y.id === itemId);

    myMessage.changedText = false;
    myMessage.message =  tempMessage.message; // <- no object change detected
    //myMessage.message = " " + tempMessage.message; // <- this works
    return myMessage;
  }

itemIds=[2,4]；
myMessages=[
{
id:2，
留言：“你好”，
更改文本：false
},
{
id:4，
信息：“世界”，
更改文本：false
}
]
启用按钮（itemId）{
this.myMessages.map（y=>{if（y.id==itemId）{
y、 changedText=true；
}});
}
getMessageDetails（itemId）{
让myMessage=this.myMessages.find（y=>y.id==itemId）；
返回myMessage；
}
saveMessageChanges（itemId，message）{
this.myMessages.map（y=>{if（y.id==itemId）{
y、 消息=消息；
y、 changedText=false；
}});
}
丢弃更改（itemId）{
让tempMessage=Object.assign（{}，（this.myMessages.find（y=>y.id==itemId））；
让myMessage=this.myMessages.find（y=>y.id==itemId）；
myMessage.changedText=false；
myMessage.message=tempMessage.message；//未检测到任何更改，因为列表中实际上没有更改
myMessages
。如果添加
{{myMessages | json}
添加到HTML中，并将文本插入文本区域，您会看到列表的内容没有更改。在
放弃更改
中，您只需将“hello”再次赋给已包含字符串“hello”的变量。因此没有更改。
如果在
discardChanges
（如您所述）中向消息添加空格，则实际上会将值从“hello”更改为“hello”->值已更改

但是，您可以通过持有“previous”列表来跟踪列表的原始条目和ngModel的使用情况，从而克服这个问题

将文本区域更改为

<textarea #message (keydown)="enableButton(itemId)" rows="5" cols="50" [(ngModel)]="getMessageDetails(itemId).message"></textarea>

我避免使用组件中的某些方法，因为它们与本例无关。只需在
ngOnInit
处为变量
previous
分配一个深度副本，并且在按save时也要这样做。如果要放弃更改，请将列表
previous
的深度副本再次分配给
myMessages

有了这个，您的视图会更新，因为现在变量值发生了变化。
非常感谢，它成功了！我也在考虑复制，但我想，也许有一种方法可以解决这个问题，但我没有想到。
<textarea #message (keydown)="enableButton(itemId)" rows="5" cols="50" [(ngModel)]="getMessageDetails(itemId).message"></textarea>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit { 
  itemIds = [2,4];
  myMessages = [
    {
      id: 2,
      message: 'hello',
      changedText: false
    },
    {
      id: 4,
      message: 'world',
      changedText: false
    }
  ]

  previous = []

  ngOnInit() {
    this.previous = this.getDeepCopy(this.myMessages);
  }

  saveMessageChanges(itemId, message){
    this.myMessages.map( y => {if (y.id === itemId) {
      y.message = message;
      y.changedText = false;
    }});

    this.previous = this.getDeepCopy(this.myMessages);
  }

  discardChanges(itemId){
    this.myMessages = this.getDeepCopy(this.previous);
    let myMessage = this.myMessages.find(y => y.id === itemId);

    return myMessage;

  }

  getDeepCopy( list ) {
    return list.map(x => Object.assign({}, x));
  }
}