Angular Ngb-Accordion 数据关联问题及解决方案

<!-- 错误：为每个数据项创建了一个独立的手风琴组件 -->
<ngb-accordion *ngFor="let data of datalist; let i = index">
  <ngb-panel title="Panel {{i+1}}">
    <!-- 面板内容 -->
  </ngb-panel>
</ngb-accordion>

<!-- 正确：在一个手风琴组件内创建多个面板 -->
<ngb-accordion #acc="ngbAccordion" activeIds="static-1">
  <ngb-panel *ngFor="let data of datalist; let i = index" [id]="'panel-' + i" [title]="data.name">
    <ng-template ngbPanelContent>
      <!-- 面板内容，例如文件输入框 -->
      <div class="form-group">
        <label [for]="'image-input-' + i">选择图片</label>
        <input type="file" [id]="'image-input-' + i" (change)="onFileChange($event, data)" />
      </div>
      <!-- 其他交互元素，如模态框触发按钮 -->
      <button (click)="openModal(content)">打开模态框</button>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

<!-- 在 ngb-panel 内容中 -->
<ng-template ngbPanelContent>
  <div class="form-group">
    <!-- 使用索引 i 生成唯一的 for 属性 -->
    <label [for]="'image-input-' + i">选择图片</label>
    <!-- 使用索引 i 生成唯一的 id 属性 -->
    <input type="file" [id]="'image-input-' + i" (change)="onFileChange($event, data)" />
  </div>
</ng-template>

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

interface Data {
  id: number;
  name: string;
  // 其他数据属性
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  datalist: Data[] = [
    { id: 1, name: '面板一' },
    { id: 2, name: '面板二' },
    { id: 3, name: '面板三' }
  ];

  selectedData: Data | null = null; // 用于存储当前选中的面板数据

  constructor(private modalService: NgbModal) {}

  // 文件选择事件处理函数
  onFileChange(event: any, data: Data): void {
    // 存储当前面板的数据，供后续操作使用
    this.selectedData = data;
    console.log('文件选择事件，当前面板数据:', this.selectedData);
    const file = event.target.files[0];
    if (file) {
      // 在这里可以处理文件，或者触发模态框
      // 例如：this.openModal(fileProcessingModal);
    }
  }

  // 模态框打开函数
  openModal(content: any): void {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
      (result) => {
        // 模态框关闭时的处理
        console.log(`模态框关闭，结果: ${result}`);
      },
      (reason) => {
        // 模态框取消时的处理
        console.log(`模态框取消，原因: ${reason}`);
      }
    );
  }

  // 处理文件上传或模态框确认的函数
  processFile(imageInput: HTMLInputElement, data: Data | null): void {
    // 确保使用当前选中的数据，而不是一个全局的错误数据
    const dataToProcess = data || this.selectedData; // 优先使用传入的数据，其次使用组件状态
    if (dataToProcess && imageInput.files && imageInput.files.length > 0) {
      const file = imageInput.files[0];
      console.log(`正在处理面板 ${dataToProcess.name} 的文件: ${file.name}`);
      // 执行文件上传或进一步处理逻辑
    } else {
      console.warn('没有选中的文件或数据。');
    }
  }
}

<!-- 模态框内容示例 -->
<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">文件处理确认</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
  </div>
  <div class="modal-body">
    <p>您确定要处理面板 **{{ selectedData?.name }}** 的文件吗？</p>
    <input type="file" #imageInput style="display: none;" /> <!-- 隐藏的 input 元素，用于模态框内部的文件引用 -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">取消</button>
    <!-- 在模态框的“完成”按钮中，将 selectedData 传递过去 -->
    <button type="button" class="btn btn-primary" (click)="processFile(imageInput, selectedData); modal.close('Done')">完成</button>
  </div>
</ng-template>