时间戳

首页 > 解决方案 > 如何访问在 ngfor 中以 Angular 2 生成的手风琴列表中的特定手风琴

javascript - 如何访问在 ngfor 中以 Angular 2 生成的手风琴列表中的特定手风琴

问题描述

我有一个生成的子手风琴列表，每个子手风琴在父手风琴内使用 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) 的引用。有什么建议么？

标签： javascriptangulartypescriptng-bootstrap

解决方案

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

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

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

推荐阅读