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

Question

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

这是一个有效的代码。任何帮助，将不胜感激。

working sample on stackblitz

Answer 1

对象通过引用传递，因此基本上this.sample和数组中相应的sample指向同一个对象。您可以改为传递索引并使用spread运算符。所以将索引添加到迭代中：

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

将索引传递给click函数：

(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