Angular 2中如何访问ngFor生成的嵌套手风琴中的特定子手风琴

我明白你的困扰——当用ngFor生成嵌套手风琴时，要定位到特定父面板下的子手风琴确实有点绕。咱们一步步来解决这个问题：

首先修正一个小错误 #

你当前TS里的@ViewChildren('parentPanels')是不对的，因为HTML里父面板的模板变量是#parentPanel，所以应该改成：

@ViewChildren('parentPanel') parentPanels: QueryList<NgbPanel>;

方法一：通过索引关联父面板与子手风琴 #

因为父面板和子手风琴是一一对应生成的，你可以直接通过@ViewChildren获取所有子手风琴，然后用父面板的索引来匹配对应的子手风琴：

步骤1：在HTML中保留子手风琴的模板变量

<ngb-accordion #acc1="ngbAccordion">
  <ngb-panel #parentPanel *ngFor="let parent of parentPanels; let pIndex=index" id="{{pIndex}}">
    <!-- 父面板标题等内容 -->
    <ngb-accordion #acc2="ngbAccordion">
      <ngb-panel *ngFor="let child of ChildrenPanels; let cIndex=index" id="{{cIndex}}">
        <!-- 子面板内容 -->
      </ngb-panel>
    </ngb-accordion>
  </ngb-panel>
</ngb-accordion>

步骤2：在TS中获取所有子手风琴并匹配索引

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { NgbPanel, NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('parentPanel') parentPanels: QueryList<NgbPanel>;
  @ViewChildren('acc2') childAccordions: QueryList<NgbAccordion>;

  parentPanels = [...]; // 你的父面板数据
  ChildrenPanels = [...]; // 你的子面板数据
  parentPanelIndex = 0; // 目标父面板索引

  ngAfterViewInit() {
    // 确保QueryList已初始化
    this.childAccordions.changes.subscribe(() => {
      this.getTargetChildAccordion();
    });
    // 初始调用
    this.getTargetChildAccordion();
  }

  getTargetChildAccordion() {
    // 通过父面板索引获取对应的子手风琴
    const targetAccordion = this.childAccordions.toArray()[this.parentPanelIndex];
    if (targetAccordion) {
      // 在这里操作子手风琴，比如打开第一个子面板
      targetAccordion.open('0');
      // 或者切换某个子面板
      targetAccordion.toggle(this.targetChildPanelId);
    }
  }
}

方法二：手动保存子手风琴引用到数组 #

如果担心索引顺序可能出现问题（比如父面板有动态增减），可以在子手风琴初始化时，把它的引用按父面板索引存入数组：

步骤1：修改HTML添加保存引用的方法

<ngb-accordion #acc1="ngbAccordion">
  <ngb-panel #parentPanel *ngFor="let parent of parentPanels; let pIndex=index" id="{{pIndex}}">
    <ngb-accordion #acc2="ngbAccordion" (ngOnInit)="saveChildAccordion(pIndex, acc2)">
      <ngb-panel *ngFor="let child of ChildrenPanels; let cIndex=index" id="{{cIndex}}">
        <!-- 子面板内容 -->
      </ngb-panel>
    </ngb-accordion>
  </ngb-panel>
</ngb-accordion>

步骤2：在TS中维护子手风琴数组

import { Component, ViewChildren, QueryList } from '@angular/core';
import { NgbPanel, NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChildren('parentPanel') parentPanels: QueryList<NgbPanel>;
  childAccordions: NgbAccordion[] = []; // 存储子手风琴引用的数组

  parentPanels = [...];
  ChildrenPanels = [...];
  parentPanelIndex = 0;

  saveChildAccordion(index: number, accordion: NgbAccordion) {
    this.childAccordions[index] = accordion;
  }

  operateTargetChildAccordion() {
    const targetAccordion = this.childAccordions[this.parentPanelIndex];
    if (targetAccordion) {
      // 执行你需要的操作，比如关闭所有子面板
      targetAccordion.collapseAll();
    }
  }
}

两种方法都能帮你精准定位到目标父面板下的子手风琴，你可以根据自己的业务场景选择。如果父面板是动态增减的，方法二更稳妥一些~

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