如何在angular中将ngFor与翻转卡片一起使用

<div *ngFor="let card of cards">
  <div class="card">
    <div class="card-front">
      <h3>{{ card.title }}</h3>
    </div>
    <div class="card-back">
      <p>{{ card.content }}</p>
    </div>
  </div>
</div>

.card {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  perspective: 1000px;
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.5s;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
}

// 在组件类中定义一个方法，用于处理卡片的翻转
flipCard(card) {
  card.flipped = !card.flipped;
}

<div *ngFor="let card of cards">
  <div class="card" (click)="flipCard(card)" [ngClass]="{'flipped': card.flipped}">
    <div class="card-front">
      <h3>{{ card.title }}</h3>
    </div>
    <div class="card-back">
      <p>{{ card.content }}</p>
    </div>
  </div>
</div>

.flipped .card-front {
  transform: rotateY(-180deg);
}

.flipped .card-back {
  transform: rotateY(0deg);
}