如何在 Angular 2 中在 ngfor 内部生成的手风琴列表中访问特定的手风琴答案

【问题标题】：How to access a specific accordion in a list of accordions generated inside ngfor in angular 2如何在 Angular 2 中在 ngfor 内部生成的手风琴列表中访问特定的手风琴
【发布时间】：2018-05-30 16:09:52
【问题描述】：

我有一个生成的子手风琴列表，每个子手风琴在父手风琴内使用 ngFor 生成的面板列表的一个面板内。我需要根据某些逻辑切换特定的子手风琴。但是它不起作用，我无法在 ngfor 生成的手风琴列表中识别出一个手风琴。

在html文件中

<ngb-accordion #acc1="ngbAccordion" >
 <ngb-panel #parentPanel *ngFor="let parentPanel of parentPanels; let parentPanelIndex=index" id="{{parentPanelIndex}}">
   <ngb-accordion #acc2="ngbAccordion" >
    <ngb-panel *ngFor="let childPanel of ChildrenPanels; let childPanelIndex=index" id="{{childPanelIndex}}">
  ....

在ts文件中：

@ViewChildren('parentPanels') parentPanels: QueryList<NgbPanel>;
....
this.parentPanels.toArray()[this.parentPanelIndex]

最后一行将根据“parentPanelIndex”中存储的值给我一个特定面板的引用。现在我可以访问父面板，但我不知道如何在该面板中获取对手风琴 (acc2) 的引用。有什么建议吗？

【问题讨论】：

标签： javascript angular typescript ng-bootstrap

【解决方案1】：

您可以使用 querySelector 让孩子处于自定义位置，例如

 const child = this.panelsView
    .nativeElement
    .querySelector(`:nth-child(${this.elem})`);
    this.result = child.innerHTML;

你可以在这里找到一个例子https://stackblitz.com/edit/angular-dwmajp

【讨论】：

你想什么时候得到 id ？你有什么活动吗？
是的，但我看不到在示例中使用 ngfor 生成的多个手风琴。我不明白如何将其应用于我的案例。你能用手风琴的ngfor具体说明一下吗
我正在当前打开的手风琴内自动保存当前打开的面板。所以，我可以通过 id 来识别当前面板，但是如何识别它的手风琴。
解决方案是将#acc2 设为变量。那么，手风琴 1 将是 #acc0，手风琴 2 将是 #acc1，等等……这可能吗？
为此，您可以将#acc1 作为组件的@ViewChild 通过它选择#acc2，或者将两者都声明为@ViewChild

【解决方案2】：

ngbAccordion 有一个称为activeIds 的属性，它接受您想要保持打开状态的所有ngb-panel 的ID。

activeIds 应该是您希望保持打开状态的 ID 数组。

更多信息请点击official documentation。

【讨论】：

是的，太棒了！我可以使用 activeID 识别要激活的面板。但是，我问的是如何识别手风琴本身。您可以通过 id= 到面板来识别它，但是如何在手风琴中添加类似的东西来识别它。
为什么要识别整个accordion？
我想在逻辑需要时关闭其所有面板，实际上是在按下特定手风琴内的特定按钮时。
解决方案是将#acc2 设为变量。那么，手风琴 1 将是 #acc0，手风琴 2 将是 #acc1，等等……这可能吗？