如何使用 Angular8 检测输入的变化

Question

我在同一行有编辑和关闭按钮，如果对输入字段进行了任何编辑，那么它必须显示一条警报消息，如果没有进行更改，它必须保留其旧值。 我的问题是，我点击编辑并对输入进行一些更改，当我点击关闭时，我可以保留新值，但是当我点击关闭时，它必须恢复为旧值

TS：

 public onEditEvent(event) {
    this.editCommitment = event;
  }

  public onCloseEvent(event){
    if(event.policyCT == this.editCommitment.policyCT && event.quotes == this.editCommitment.quotes && event.writtenPremium == this.editCommitment.writtenPremium) {
      event.writtenPremium = this.editCommitment.writtenPremium;
      event.policyCT = this.editCommitment.policyCT;
      event.quotes = this.editCommitment.quotes 
      this.editableRow = 0;
    } else {
      alert('change')
    }
  }

演示

Answer 1

默认情况下 ng-model 将更新模型。 当用户单击编辑按钮时，您需要手动维护旧值。 如下图：-

 selectedRow: any;
  public onEditEvent(event) {
    this.selectedRow = { ...event };
    this.editCommitment = event;
  }

当用户单击关闭按钮时应用它。

  public onCloseEvent(event) {
    event.writtenPremium = this.selectedRow.writtenPremium;
    event.policyCT = this.selectedRow.policyCT;
    event.quotes = this.selectedRow.quotes;
    this.editableRow = 0;
  }

在保存单击时，您无需执行任何操作，因为模型已经更新。

工作演示：- https://stackblitz.com/edit/angular-turxyo?file=src%2Fapp%2Fapp.component.ts