如何使用 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