我无法对子 ngbAccordion 使用 ngbAccordion 方法

Question

<ngb-accordion #accord="ngbAccordion">
  <ngb-panel  *ngFor=" let children of laptop.children; let index = index" id="static-{{index}}" title="[{{children.id}}] - {{children.name}}">
    <ng-template ngbPanelContent>
        <ngb-accordion #childaccord="ngbAccordion">
            <ngb-panel  *ngFor=" let children2 of children.children; let index2 = index" [disabled]="false"   id="static2-{{index2}}" >
              <ng-template ngbPanelTitle>
                  <span>&#9733; <b>[{{children2.id}}]</b> {{children2.name}} &#9733;
                    <div style="float:right; border: solid 0.3em; border-color: gold;">+{{children2.price}}€</div>
                  </span>
              </ng-template>
            </ngb-panel>
          </ngb-accordion>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

<button (click)="accord.closeAll()">CloseParent</button>

<button (click)="childaccord.closeAll()">Closechild</button>

在这种情况下，Closeparent 按钮工作正常不是 Closechild 按钮。

Answer 1

您需要 "parents" 和 "childs" 手风琴。为此，您使用 ViewChildren。

在你的.ts

  @ViewChildren('accord')parents:QueryList<NgbAccordion>
  @ViewChildren('childaccord')children:QueryList<NgbAccordion>

  closeAllParent()
  {
    this.parents.forEach(x=>x.collapseAll())
  }
  closeAllChildren()
  {
    this.children.forEach(x=>x.collapseAll())
  }

参见 stackblitz

中的示例

注意：第 7 章，如果您提供更多线索甚至创建一个 stackblitz，尝试提供帮助会更容易

我无法对子 ngbAccordion 使用 ngbAccordion 方法

I am not able to use ngbAccordion methods to the child ngbAccordion

angular

twitter-bootstrap

user-interface

ng-bootstrap