Angular: не обновлять значения в ngx-datatable-column, если модальное (всплывающее окно) прервано - PullRequest
Новая
       20

Angular: не обновлять значения в ngx-datatable-column, если модальное (всплывающее окно) прервано

0 голосов
/ 15 мая 2019

У меня есть 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, так и модальные. Давайте назовем этот объект гаа. Так как это происходит до любого взаимодействия с пользователем, оно содержит исходные значения.

В функции 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();
  }`

Однако это не работает. Клонированный объект содержит правильные (неизменные) значения, но значение строки в таблице данных все равно будет обновлено с измененными значениями. (Как ни странно, я могу отобразить правильные значения, если остановлю все на короткое время с помощью отладчика. Но без отладчика - нет шансов. Значения обновляются несмотря на присвоение.)

Может быть, весь подход неверен. Как я могу не обновлять значения строки, если пользователь нажимает «Abort»?

1 Ответ

0 голосов
/ 15 мая 2019

Вместо создания "глубокой копии" gaa, я бы порекомендовал вам создать неглубокую копию , чтобы копировать адрес / ссылку в памяти. Это связано с тем, что ngx-datatable построен с обнаружением изменений onPush , таким образом, это позволит соответствующим образом запускать обнаружение изменений Angular.

Мы используем синтаксис распространения ES6 для создания мелкой копии gaa. 

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

Теперь, когда вы отменяете свои отмененные изменения, мы переназначаем gaa с ранее созданным мелким клоном temp. 

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