ng-bootstrap 手风琴在 Angular 的 for 循环中不起作用

Question

It does not work in for loop.

<ng-container *ngFor="let p of [0,1,2]">
    <ngb-accordion [closeOthers]="true">
        <ngb-panel  id={{p}}>
            <ng-template ngbPanelTitle>
                title 
            </ng-template>
            <ng-template ngbPanelContent>
                content 
            </ng-template>
        </ngb-panel>
    </ngb-accordion>
</ng-container>

The id should be unique. Other panels should close when a new panel is opened. Example: https://ng-bootstrap.github.io/#/components/accordion/examples (One open panel at a time)

Answer 1

Please find the working code snippet

<ngb-accordion [closeOthers]="true">
  <ng-container *ngFor="let result of results; let i= index">
    <ngb-panel id="ngb-panel-{{i}}" title="{{result}}">
      <ng-template ngbPanelContent>
        <div>
          hello content{{i}}
        </div>
      </ng-template>
    </ngb-panel>
  </ng-container>
</ngb-accordion>