Angular：如果模態（彈出窗口）中止，則ngx-datatable-column中的值不會更新

Question

我有一個帶有幾列的ngx-datatable，如下所示：

  <ngx-datatable-column name="PLZ/Ort" prop="plzCity" [flexGrow]="1" >
    <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template>
      <span (click)="sort($event, sortDir, sortFn)">PLZ/Ort</span>
    </ng-template>
   </ngx-datatable-column>

如果我單擊該行，則會出現一個模態（彈出窗口），其中包含此數據表行中的預填充值。 如果我改變任何東西並保存模態消失，新值出現在行中。 （預期）

如果我更改模態中的值並單擊“中止”，模態也會消失，新值也會出現在行中。 （意外）。 要恢復原始值，我需要重新加載頁面。 （可行，但痛苦）

所以我試着實現一個解決方法：在ngOnInit()我制作了一個JSON對象的深層副本，它包含了ngx-datatable和modal的值。 讓我們稱這個對象為gaa。 由於它發生在任何用戶交互之前，它包含原始值。

在abort()函數中，我只需將原始值重新分配給gaa對象。

` abort() {
    console.log('close');
    console.log(this.changes)
    this.gaa = this.oldGaa; //it is proven that oldGaa contains the unchanged values.
    this.activeModal.close();
  }`

但它不起作用。 克隆的對象包含正確的（未更改的）值，但數據表中的行值仍將使用更改的值進行更新。 （奇怪的是，如果我用調試器短時間停止整個事情，我可以顯示正確的值。但沒有調試器 - 沒有機會。盡管有分配，值仍會更新。）

也許整個方法都是錯誤的。 如果用戶點擊“中止”，我怎么能不更新行的值？

Answer 1

我不建議創建gaa的“深層副本”，而是建議您創建它的淺層副本 ，以便復制內存地址/引用。 這是因為ngx-datatable是使用onPush變化檢測構建的 ，因此這將允許相應地觸發Angular的變化檢測。

我們使用ES6的擴展語法來創建一個淺層的gaa 。

this.temp = [...this.gaa]; 

現在，當您中止更改中止時，我們將gaa重新分配給先前創建的淺層克隆temp 。

abort() {
  this.gaa = this.temp;
  this.activeModal.close();
}