Angular中可折叠的Accordion，不使用JS代码，而只使用HTML。每当我单击该按钮时，它什么也不做。请解决这个问题

<div *ngFor="let item of accordionItems">
  <button (click)="toggleAccordion(item)" [ngClass]="{'active': item.active}">
    {{ item.title }}
  </button>
  <div *ngIf="item.active">
    {{ item.content }}
  </div>
</div>

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

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

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