ng-bootstrap accordion在Angular中的for循环中不起作用

<ngb-accordion>
  <ngb-panel *ngFor="let item of items; let i = index" [id]="'accordion-' + i">
    <ng-template ngbPanelTitle>
      {{ item.title }}
    </ng-template>
    <ng-template ngbPanelContent>
      {{ item.content }}
    </ng-template>
  </ngb-panel>
</ngb-accordion>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  items = [
    { title: 'Item 1', content: 'Content 1' },
    { title: 'Item 2', content: 'Content 2' },
    { title: 'Item 3', content: 'Content 3' }
  ];
}