ngFor Angular中的Accordion

<ng-container *ngFor="let item of items">
  <div class="accordion">
    <div class="accordion-header" (click)="toggleAccordion(item)">
      {{ item.title }}
    </div>
    <div class="accordion-content" *ngIf="item.open">
      {{ item.content }}
    </div>
  </div>
</ng-container>

export class AppComponent {
  items = [
    { title: 'Accordion 1', content: 'Content 1', open: false },
    { title: 'Accordion 2', content: 'Content 2', open: false },
    { title: 'Accordion 3', content: 'Content 3', open: false }
  ];

  toggleAccordion(item: any) {
    item.open = !item.open;
  }
}

.accordion {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
}