Angular 5展开/折叠列表

<ul>
  <li *ngFor="let item of items">
    <div (click)="toggleItem(item)">
      {{ item.name }}
    </div>
    <div *ngIf="item.isExpanded">
      {{ item.description }}
    </div>
  </li>
</ul>

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

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent {
  items: any[] = [
    { name: 'Item 1', description: 'Description 1', isExpanded: false },
    { name: 'Item 2', description: 'Description 2', isExpanded: false },
    { name: 'Item 3', description: 'Description 3', isExpanded: false }
  ];

  toggleItem(item: any) {
    item.isExpanded = !item.isExpanded;
  }
}