时间戳

首页 > 解决方案 > 使用 ngx-bootstrap 从角度更新模态数据

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

问题描述

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

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

stackblitz 上的工作样本

标签： angularmodal-dialogngx-bootstrap

解决方案

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

<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

推荐阅读