时间戳

首页 > 解决方案 > 当表单编辑角度时，ngb modal 将数据传递给

javascript - 当表单编辑角度时，ngb modal 将数据传递给

问题描述

我正在使用 ngb 模态进行表单编辑。这是我的编辑按钮功能

  editCheckin(data: CheckInModel, details: any) {
console.log(data);
this.modalService.open(details, { ariaLabelledBy: 'modal-basic-title', size: 'xl', backdrop: 'static' }).result.then((id) => {
}, (reason) => {

});

当我点击编辑按钮时，上面的函数调用和加载弹出正确。这是我的编辑按钮

  <button mat-stroked-button type="button" class="action-btn"
                                    (click)="editCheckin(element, details)">
                                    <i class="fas fa-pencil-alt"></i>
                                </button>

编辑对象正确传递。console.log(data) 结果如下

在此处输入图像描述

现在我需要该控制台记录的数据到我的弹出窗口。我如何通过它。

标签： javascriptangular

解决方案

您可以直接编辑组件实例，执行类似的操作

在您的模式中添加一个属性：

data: CheckInModel

当您调用模态时，您只需执行以下操作：

openModal() {
   const modalRef = this.modalService.open(ModalContentComponent);
   modalRef.componentInstance.data = this.data;
}

在我的应用程序中，我有一个包装 ngb 模态服务的自定义服务：

export class ModalService {
  constructor(private modalService: NgbModal) {}

  open<C, T>(content: unknown, config?: T, options?: NgbModalOptions): ModalRef<C> {
    const modal = this.modalService.open(content, {
      centered: true,
      backdrop: true,
      size: 'm',
      ...options,
    });
    Object.assign(modal.componentInstance, config);
    return modal;
  }
}

这样我可以简单地用我的服务调用我的模式并传递数据：

    const ref = this.modalService.open<GenericModalComponent, GenericModalData>(
      GenericModalComponent,
      {
        data: 'this will be passed to the modal instance'
      }
    );

重要的是模态有一个同名的已定义属性（这里是数据）

更多这里

推荐阅读