使用 ngx-bootstrap 以角度从模态更新数据

Question

我有一个 angular 项目，我正在尝试使用ng-bootstrap更新数据。 我有表格并安装了依赖项。 每当我单击编辑按钮时，模态都会打开编辑表单并填充数据。 到目前为止，这就是我想要的。 但是，每当我从模态更改值时，表格也会发生变化，它会实时反映表格中的数据。 我想做的是当我在编辑后单击模态的外部时，我希望表格恢复到原始表格，因为我还没有保存它。 基本上，如果用户编辑数据然后在模态之外单击，我想防止用户出错。 他们会认为数据已更新，因为它反映了表格。 但是，此更新在客户端进行，刷新后将恢复为原始形式。 我如何防止这种情况？ 基本上，我的解决方案是，如果用户在模态之外单击，则模态关闭。 我需要重置表中数据的编辑部分。

这是一个工作代码。 任何帮助，将不胜感激。

stackblitz 上的工作示例

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