使用 ngx-bootstrap 从 angular 中的模态更新数据

Question

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

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

working sample on 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

使用 ngx-bootstrap 从 angular 中的模态更新数据

Updating data from modal in angular using ngx-bootstrap

modal-dialog

ngx-bootstrap

angular