如何在Angular中将对象从ng-bootstrap模态框传回主组件？

我来帮你捋捋问题出在哪哈～你现在把(callBackPopUp)绑定在触发模态框的按钮上，这是不对的！@Output事件属于模态框组件本身，不是按钮，所以得换个方式来实现数据传递。下面给你两种靠谱的解决方案：

方案一：用@Output事件发射器传递数据 #

1. 先在模态框组件里定义输出事件

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-product-edit-modal',
  templateUrl: './product-edit-modal.component.html'
})
export class ProductEditModalComponent {
  // 接收主组件传进来的待编辑产品
  @Input() targetProduct: any;
  // 定义输出事件，用来传递编辑后的产品
  @Output() productEdited = new EventEmitter<any>();

  constructor(public activeModal: NgbActiveModal) {}

  // 假设这是模态框里的保存按钮点击事件
  onSaveProduct() {
    // 这里写你的产品编辑逻辑...
    // 把编辑后的产品通过输出事件发送给主组件
    this.productEdited.emit(this.targetProduct);
    // 关闭模态框
    this.activeModal.close();
  }
}

2. 在主组件里订阅模态框的输出事件

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ProductEditModalComponent } from './product-edit-modal.component';

@Component({
  selector: 'app-view-products',
  templateUrl: './viewProducts.component.html'
})
export class ViewProductsComponent {
  products: any[] = []; // 你的产品列表数据

  constructor(private modalService: NgbModal) {}

  openPopUpEdit(product: any) {
    // 打开模态框并获取实例
    const modalRef = this.modalService.open(ProductEditModalComponent);
    // 把要编辑的产品传给模态框
    modalRef.componentInstance.targetProduct = product;

    // 订阅模态框的输出事件，接收编辑后的产品
    modalRef.componentInstance.productEdited.subscribe((updatedProduct) => {
      this.callBackPopUp(updatedProduct);
    });
  }

  callBackPopUp(updatedProduct: any) {
    // 这里处理更新后的产品，比如替换列表里的旧数据
    const productIndex = this.products.findIndex(p => p.id === updatedProduct.id);
    if (productIndex !== -1) {
      this.products[productIndex] = updatedProduct;
    }
  }
}

3. 修正主组件的HTML代码

把按钮上的(callBackPopUp)绑定删掉，按钮只负责打开模态框就行：

<tr *ngFor="let product of products">
  <td class="text-center">
    <button class="btn btn-default" name="openPopUp" (click)="openPopUpEdit(product)">
      <i class="fa fa-edit" style="font-size: 20px"></i>
    </button>
  </td>
  <!-- 其他列内容 -->
</tr>

方案二：用模态框的result返回数据（更简洁） #

这种方式不需要定义@Output，直接通过模态框的关闭方法传递数据：

1. 修改模态框组件的保存方法

onSaveProduct() {
  // 直接把编辑后的产品作为关闭结果返回
  this.activeModal.close(this.targetProduct);
}

2. 主组件里接收模态框结果

openPopUpEdit(product: any) {
  const modalRef = this.modalService.open(ProductEditModalComponent);
  modalRef.componentInstance.targetProduct = product;

  // 通过result获取模态框关闭时返回的数据
  modalRef.result.then((updatedProduct) => {
    // 这里判断一下，避免模态框取消时的空数据
    if (updatedProduct) {
      this.callBackPopUp(updatedProduct);
    }
  }).catch((error) => {
    // 处理模态框被取消的情况（比如点击空白处关闭）
    console.log('模态框取消关闭:', error);
  });
}

这样就能顺利把编辑后的产品对象从模态框传到主组件啦～

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