如何在Angular 2中向Bootstrap 4模态框传递动态参数

没问题，我来帮你一步步实现这个需求，核心就是把动态按钮的点击事件和模态框做数据绑定，同时用Angular来控制模态框的显示与参数传递～

步骤1：修改动态生成的按钮，添加点击事件绑定数据 #

先把你原来的动态按钮代码调整一下，去掉原生Bootstrap的data-toggle和data-target（我们用Angular逻辑来控制模态框），添加点击事件直接传递当前的data对象：

<ng-container *ngFor="let data of mapData">
  <div *ngIf="data.OrderState==='1'" class="ds">
    <button 
      [id]="data.DrId" 
      class="btn btn-outline secondary"
      (click)="openModal(data)"
    >
      {{data.Name}}
    </button>
  </div>
</ng-container>

步骤2：在组件类中定义变量并实现模态框控制方法 #

在你的组件.ts文件里，先定义一个变量存储当前选中的按钮数据，再实现打开模态框的方法（这里需要确保项目已经引入了jQuery和Bootstrap的JS文件）：

import { Component } from '@angular/core';
// 如果项目全局引入了jQuery可以跳过这行，否则需要声明
declare var $: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  mapData: any[] = []; // 你的数据源，根据实际情况赋值
  selectedData: any; // 存储当前点击按钮对应的数据集

  openModal(data: any) {
    // 浅拷贝数据，避免直接修改原数组里的内容
    this.selectedData = { ...data };
    // 调用Bootstrap原生方法唤起模态框
    $('#exampleModal').modal('show');
  }

  // 处理模态框的保存按钮点击事件
  saveChanges() {
    // 在这里可以直接拿到选中的DrId和Name
    console.log('要保存的DrId:', this.selectedData.DrId);
    console.log('要保存的Name:', this.selectedData.Name);
    
    // 执行你的业务逻辑，比如调用接口保存数据...
    
    // 保存完成后关闭模态框
    $('#exampleModal').modal('hide');
  }
}

步骤3：修改模态框，绑定数据到输入字段 #

接下来调整你的Bootstrap模态框代码，把selectedData的属性绑定到输入框中，同时给「Save changes」按钮添加点击事件：

<!-- 移除原来的静态触发按钮，我们用动态按钮触发模态框 -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">编辑信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 绑定DrId到输入框，设置为只读避免修改 -->
        <div class="form-group">
          <label for="drId">DrId</label>
          <input type="text" class="form-control" id="drId" [(ngModel)]="selectedData.DrId" readonly>
        </div>
        <!-- 绑定Name到输入框，支持修改 -->
        <div class="form-group">
          <label for="name">名称</label>
          <input type="text" class="form-control" id="name" [(ngModel)]="selectedData.Name">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="saveChanges()">Save changes</button>
      </div>
    </div>
  </div>
</div>

额外小提示：无jQuery的替代方案（推荐） #

如果不想在Angular项目中引入jQuery，更推荐使用ng-bootstrap（官方为Angular封装的Bootstrap组件），完全用Angular的方式控制模态框，不需要依赖第三方库。核心步骤就是安装ng-bootstrap、导入模块，然后用NgbModal服务来打开模态框并传递数据，代码风格更贴合Angular生态。

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