Обновление данных из модального в угловой с помощью ngx-bootstrap

Question

У меня есть угловой проект, который я пытаюсь обновить, используя данные ng-bootstrap.У меня есть формы и установлены зависимости.Всякий раз, когда я нажимаю на кнопку редактирования, модал открывает форму редактирования с заполненными данными.Пока что это то, что я хотел.Однако всякий раз, когда я изменяю значение с модального, таблица также изменяется, и она отражает данные в таблице в режиме реального времени.Что я хотел бы сделать, так это когда я нажимаю на внешнюю сторону модального окна после редактирования, я хочу вернуть таблицу к исходной форме, поскольку я еще не сохранил ее.По сути, я хотел бы предотвратить ошибку пользователей, если они редактируют данные, а затем щелкают за пределами модальной.Они подумают, что данные обновляются, поскольку они отражают таблицу.Однако это обновление находится на стороне клиента и при обновлении вернется к исходной форме.Как мне предотвратить это?По сути, мое решение было бы, если пользователь нажимает за пределы модального, модальное закрывается.И мне нужно сбросить отредактированную часть данных в таблице.

Вот рабочий код.Любая помощь будет оценена.

рабочий образец на стеке

Answer 1

Объекты передаются по ссылке, поэтому, по существу, this.sample и соответствующий sample в массиве указывают на один и тот же объект.Вместо этого вы можете передать индекс и использовать оператор распространения.Поэтому добавьте индекс к вашей итерации:

<tr *ngFor="let sample of samples; let i = index">

Передайте индекс функции щелчка:

(click)="updateSample(i, updateSampleModal)

и самой функции, где вы объявили переменную index в своемкомпонент:

updateSample(index: any, modal) {
  this.index = index;
  this.sample = { ...this.samples[index]};
  this.modalRef = this.modalService.show(modal,
    Object.assign({}, { class: 'gray modal-lg' })
  );
}

И если нажата кнопка сохранения, присвойте значение конкретному образцу в массиве:

update(sample) {
  this.samples[this.index] = sample;
}

Ваш StackBlitz