按下Esc鍵時，將先前的值恢復到輸入字段中-Angular

Question

我有一個數組

public languages: any[] = [{Name: "English", IsDefault: true},
                        {Name: "Russian", IsDefault: false},
                        {Name: "Spanish", IsDefault: false}];

在.ts文件和.html文件中，我已經將這些語言名稱顯示為輸入字段，如下所示：

  <ul class="list-style-type">
              <li class="li-list-style-type"  *ngFor="let language of languages; let i=index" id="language-item-{{i}}">
                <mat-form-field class="mat-input-style">
                  <input matInput [(ngModel)]="language.Name" (keyup.esc)="setPreviousValue($event,language,i)">
                </mat-form-field>

我可以在輸入字段中編輯語言名稱。 如果按Esc鍵，則需要恢復該輸入的先前值。 我嘗試通過在.ts文件中編寫以下函數來進行嘗試。

public setPreviousValue(event,language,index)
{
  language.Name=this.languages[index].Name;
}

但是我得到的是新輸入的名稱，而不是以前的名稱。 我相信是因為在.html文件中使用了[[ngModel）]。 試圖創建一個用於存儲Name的局部變量。 但是不能那樣做。 誰能幫我解決這個問題？

Answer 1

[(ngModel)]="language.Name"將language.Name綁定到用戶鍵入的值，並在鍵入時更新，因此setPreviousValue函數將變量設置為其自己的當前值。 您將需要單獨存儲原始名稱。 一種選擇是使用languages在每個條目上設置一個PreviousName屬性。 設置該值時，確切取決於“上一個值”的含義。 如果是加載表單時的值，則可以在ngOnInit生命周期掛鈎中進行設置。

ngOnInit() { 
    this.languages = this.languages.map(l => {...l, PreviousName: l.Name});
}
public setPreviousValue(event,language,index)
{
  language.Name=this.languages[index].PreviousName;
}

但是，提交表單時要小心，否則最終將試圖將PreviousName保存到數據庫中。

Answer 2

如果您希望“ esc”恢復以前的值（不是原始值，我想說的是，如果將英語更改為Dustch，將Dustch更改為Green + ESC，則將獲得Dustch），則可以使用[ngModel]並更新（模糊）中的值。 在（keyup.esc）中等於模型的值。 為此，必須使用參考變量

<ul class="list-style-type">
    <li class="li-list-style-type" 
       *ngFor="let language of languages; let i=index" 
       id="language-item-{{i}}">
        <mat-form-field class="mat-input-style">
            <input matInput #input name="language+{{i}}" 
            [ngModel]="language.Name" 
            (blur)="language.Name=input.value" 
            (keyup.esc)="input.value=language.Name">
    </mat-form-field>
    </li>
</ul>

見stackblitz