Angular Ngb-Accordion 动态面板数据管理与常见问题解决

<!-- 错误：为每个数据项创建一个独立的 accordion -->
<ngb-accordion *ngFor="let data of datalist">
  <ngb-panel>
    <ng-template ngbPanelTitle>{{ data.title }}</ng-template>
    <ng-template ngbPanelContent>
      <!-- 面板内容 -->
    </ng-template>
  </ngb-panel>
</ngb-accordion>

<!-- 正确：在一个 accordion 内创建多个 panel -->
<ngb-accordion>
  <ngb-panel *ngFor="let data of datalist; let i = index">
    <ng-template ngbPanelTitle>{{ data.title }}</ng-template>
    <ng-template ngbPanelContent>
      <!-- 面板内容，此处可以使用 i 来生成唯一 ID -->
    </ng-template>
  </ngb-panel>
</ngb-accordion>

<ngb-accordion>
  <ngb-panel *ngFor="let data of datalist; let i = index">
    <ng-template ngbPanelTitle>{{ data.title }}</ng-template>
    <ng-template ngbPanelContent>
      <label [for]="'image-input-' + i">选择图片</label>
      <input type="file" [id]="'image-input-' + i" (change)="onFileChange($event, data)">
      <!-- 其他内容 -->
    </ng-template>
  </ngb-panel>
</ngb-accordion>

import { Component } from '@angular/core';

interface Data {
  id: number;
  title: string;
  // 其他数据属性
  selectedFile?: File; // 可以添加一个属性来存储文件
}

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

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

  onFileChange(event: any, data: Data): void {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0];
      // 可以在此处将文件关联到 data 对象，或者仅存储 data 对象本身
      // data.selectedFile = file; // 如果需要直接更新数据列表中的项
      this.selectedData = data; // 保存当前操作的面板数据上下文
      console.log('文件已选择，当前面板数据:', this.selectedData);
      // 可以在这里打开模态框，模态框将使用 this.selectedData
    }
  }

  // 假设这是一个处理文件或模态框结果的函数
  processFile(fileInput: HTMLInputElement, dataToProcess: Data | null): void {
    if (dataToProcess) {
      console.log('正在处理面板数据:', dataToProcess);
      // 这里可以执行上传、保存等操作，使用 dataToProcess 确保数据准确性
      // 例如：上传 fileInput.files[0] 并关联到 dataToProcess
      alert(`处理面板 ${dataToProcess.title} 的文件.`);
    } else {
      console.warn('没有选中的面板数据可供处理。');
    }
    // 重置 selectedData
    this.selectedData = null;
    // 清空文件输入框，避免重复触发 change 事件
    if (fileInput) {
      fileInput.value = '';
    }
  }
}

<ngb-accordion>
  <ngb-panel *ngFor="let data of datalist; let i = index">
    <ng-template ngbPanelTitle>{{ data.title }}</ng-template>
    <ng-template ngbPanelContent>
      <div>
        <label [for]="'image-input-' + i">选择图片：</label>
        <input type="file" [id]="'image-input-' + i" #imageInput (change)="onFileChange($event, data)">
      </div>
      <button 
        class="btn btn-primary mt-2" 
        (click)="processFile(imageInput, selectedData)"
        [disabled]="!selectedData || selectedData.id !== data.id"
      >
        完成处理
      </button>
    </ng-template>
  </ngb-panel>
</ngb-accordion>