Angular使用ngb modal做表单编辑时如何向模态框传递数据

根据你传入modalService.open()的details类型不同，有两种常用实现方案： #

场景1：details是当前页面内定义的ng-template模板 #

你可以在调用open方法时，通过配置项的data字段携带编辑数据：
修改editCheckin方法代码如下：

editCheckin(data: CheckInModel, details: any) {
  console.log(data);
  this.modalService.open(details, { 
    ariaLabelledBy: 'modal-basic-title', 
    size: 'xl', 
    backdrop: 'static',
    data: { editData: data } // 新增这行传入编辑对象
  }).result.then((id) => {
  }, (reason) => {

  });
}

之后在你的ng-template模板中通过上下文接收参数即可：

<ng-template #details let-modal let-modalData="data">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">编辑打卡信息</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()"><span aria-hidden="true">&times;</span></button>
  </div>
  <div class="modal-body">
    <!-- modalData.editData就是你传入的编辑对象，直接绑定到表单即可 -->
    <form>
      <div class="mb-3">
        <label>打卡ID</label>
        <input type="text" class="form-control" [(ngModel)]="modalData.editData.id" name="id">
      </div>
      <!-- 剩余表单项按同样规则绑定即可 -->
    </form>
  </div>
</ng-template>

场景2：details是单独封装的模态框组件 #

你可以通过modalRef的componentInstance给模态框组件的属性赋值：
首先在你的模态框组件中提前定义接收数据的输入属性：

// 模态框组件ts文件
import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { CheckInModel } from '你的模型路径/CheckInModel';

@Component({
  selector: 'app-checkin-edit-modal',
  templateUrl: './checkin-edit-modal.component.html'
})
export class CheckinEditModalComponent {
  // 定义接收编辑数据的属性
  @Input() editData!: CheckInModel;

  constructor(public activeModal: NgbActiveModal) {}
}

然后修改editCheckin方法：

editCheckin(data: CheckInModel, details: any) {
  console.log(data);
  const modalRef = this.modalService.open(CheckinEditModalComponent, { 
    ariaLabelledBy: 'modal-basic-title', 
    size: 'xl', 
    backdrop: 'static'
  });
  // 给模态框组件的editData属性赋值
  modalRef.componentInstance.editData = data;

  modalRef.result.then((id) => {
  }, (reason) => {

  });
}

之后你就可以在模态框组件的模板中直接使用editData绑定表单。 #

小提示：如果使用响应式表单，拿到editData后调用表单的patchValue方法批量赋值即可；如果使用模板驱动表单，记得给每个表单项添加name属性。

内容的提问来源于stack exchange，提问作者Kumara