我希望我的按鈕隱藏並只顯示我點擊的卡片的內容而不影響其他人

Question

從圖像中，您可以看到我添加的任何內容都會重復，具體取決於我創建的卡片數量，並且下拉按鈕會同時影響所有卡片，因為您可以看到所有卡片都同時打開。 我使用angular 7和angular material進行設計

Answer 1

假設你的卡片是一個數組，這可能是這樣的：

成分：

class MyComponent {
  data: [{
    label: 'First',
    items: [{name: 'name'}, {name: 'name'}, {name: 'name'}],
    isOpen: false
  }, {
    label: 'Second',
    items: [{name: 'Time'}, {name: 'Time'}, {name: 'Time'}],
    isOpen: false
  }, {
    label: 'Third',
    items: [{name: 'baby'}, {name: 'baby'}, {name: 'baby'}],
    isOpen: false
  }]
}

toggleCard(card) {
  card.isOpen = !card.isOpen;
}

  <div class="cards" *ngFor="let card of data">
    <div class="card-header" (click)="toggleCard(card)">
    </div>
    <div class="card-content" *ngIf="card.isOpen">
    </div>

  </div>