Angular中ngb-accordion面板点击获取数据异常问题咨询

ngb-accordion组件默认在切换面板时，不会销毁处于隐藏状态的面板DOM，此时页面中会同时存在多个面板内的<input type="file">控件。如果你的change事件逻辑没有绑定当前面板的上下文，要么是全局DOM查询拿到了第一个匹配的控件实例，要么是赋值逻辑没有区分面板归属，就会出现操作后面板却拿到前面板数据的异常。

• 最稳妥的方案：给每个面板绑定唯一标识，file控件触发change事件时，显式把当前面板id/面板对应的数据对象作为参数传入事件处理函数，取值直接从$event.target获取当前触发事件的控件实例，按面板id分桶存储数据，不要用全局单变量存所有面板的文件值。
  模板参考写法：

  <ngb-accordion #acc="ngbAccordion">
    <ngb-panel *ngFor="let item of formList; let idx = index" [id]="'panel_'+idx">
      <ng-template ngbPanelHeader>
        <button ngbPanelToggle>面板{{idx+1}}</button>
      </ng-template>
      <ng-template ngbPanelContent>
        <input type="file" (change)="handleFileSelect($event, 'panel_'+idx)">
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
  

  逻辑层参考写法：

  // 用Map按面板id存储对应文件
  panelFileMap = new Map<string, File>();
  
  handleFileSelect(e: Event, panelId: string) {
    const fileInput = e.target as HTMLInputElement;
    if (fileInput.files?.length) {
      this.panelFileMap.set(panelId, fileInput.files[0]);
    }
  }
  

• 快速修复方案：给ngb-accordion加上[destroyOnHide]="true"配置项，切换面板时自动销毁已隐藏面板的DOM节点，页面同一时间只会存在当前展开面板的file控件，从根源上避免多控件实例导致的引用错乱。
• 避坑提醒：不要在change事件逻辑里用document.querySelector、document.getElementsByClassName这类全局DOM查询方法找file控件，这类方法永远会返回DOM里第一个匹配的元素，只要页面存在多个同选择器的控件就会拿错值。

踩坑提示：如果选择destroyOnHide方案，一定要提前处理面板内临时输入的缓存逻辑，避免用户切换面板后之前填写的内容、选中的文件被清空，影响交互体验。

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