Question

我有一个带有带有编辑和删除按钮的对象的表，所以当我将paremeter（行中的对象）从parentComponent传递到“ edit”模式（使用ngbModal），然后更改一些值时，但是我很遗憾，我关闭了它在模态表头中带有X，表格保留了最后更改的值，那么如何将参数恢复为其原始值？

这是我的parentComponent.ts函数，用于打开模式并通过参数：

//receives the element from row and pass it to modal
openModalEdit(element){
    const modalRefCity = this.modalService.open(ModalEditComponent);
    modalRefCity.componentInstance.horario = element;

    modalRefCity.componentInstance.horarioevent.subscribe(($e) => {
        this.editHorario($e);
        this.modalService.dismissAll();
        console.log($e);
    })
}

这很好，打开了模态并且将值传递给编辑。

这是我的ModalEditComponent：

export class ModalEditComponent implements OnInit {

    @Input() horario;
    @Output() horarioevent = new EventEmitter<string>();

     constructor(public activeModal: NgbActiveModal) { }

    updateHorario(){

     this.horarioevent.emit(this.horario);
    }

这是我的modal-edit.component.html

<div class="modal-header">

 <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  ...

因此，当我更改horario（从父级传递的参数）的值然后保存新值时，它可以完美地工作（edit函数可以正常工作）。

问题是当我打开模态，然后更改horario的一些值，然后后悔时，因此使用模态标题中的X按钮关闭模态，模态被关闭，但是对象显示了我上一次更改的值制作（我知道这只是在我看来，不在我的数据库中）。

如何将参数重置为其原始值？

Answer 1

您可以利用Spread语法将数据副本从父组件传递给子组件

modalRefCity.componentInstance.horario = {...element};

Spread syntax

在关闭ngbModal

1 个答案: