角度2 /ブートストラップでカードを自動的にロールアップ

Question

角度2とブートストラップ4で作業を始めました。ブートストラップのカードクラスを使用してページについて作成しました。カードをクリックすると、再度クリックするとロールアップします。コードを実装したいので、次のカードをクリックすると、前のカードが自動的にロールアップされ、常に1枚のカードが開きます。ここで

は、HTMLファイルの一部です：

<div class="card"> 
      <div class="card-header" (click)="toggleShowSystemRequirements()"> 
       <h4> 
       System Requirements 
       <span class="pull-right" *ngIf="!showSystemRequirements"><i class="fa fa-chevron-down"></i></span> 
       <span class="pull-right" *ngIf="showSystemRequirements"><i class="fa fa-chevron-up"></i></span> 
       </h4> 
      </div> 
      <div *ngIf="showSystemRequirements" class="card-block"> 
       <p>Software will operate on the following computers:</p> 
       <ul> 
       <li> 
        64-bit or 32-bit computer running Windows OS 
       </li> 
       <li> 
        64-bit or 32-bit computer running Linux OS 
       </li> 
       <li> 
        Mac OS X 
       </li> 
       </ul> 
      </div> 
      </div> 
<div class="card"> 
     <div class="card-header" (click)="toggleShowPSAT()"> 
     <h4> 
       PSAT 
      <span class="pull-right" *ngIf="!showPSAT"><i class="fa fa-chevron-down"></i></span> 
      <span class="pull-right" *ngIf="showPSAT"><i class="fa fa-chevron-up"></i></span> 
      </h4> 
     </div> 
     <div *ngIf="showPSAT" class="card-block"> 
      <p> 

      </p> 

      <h4>Intended Users</h4> 
      <p> 

      </p> 

      <h4>Inputs</h4> 
      <p></p> 
      <ul> 
       <li>P</li> 
       <li>System</li> 
       <li>Number</li> 
      </ul> 

      <h4>Outputs</h4> 
      <p>Base</p> 
      <ul> 

       <li>Optimization 
       </li> 
      </ul> 
      </div> 
     </div> 

そして、ここに私のTSファイルです：あなたは、いくつかの方法で1つのトップ私の頭の中であなたの条件を達成することができます

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


@Component({ 
    selector: 'app-about-page', 
    templateUrl: './about-page.component.html', 
    styleUrls: ['./about-page.component.css'] 
}) 
export class AboutPageComponent implements OnInit { 

    showSystemRequirements: boolean = false; 
    showPSAT: boolean = false; 
    showPHAST: boolean = false; 
    constructor() { } 

    ngOnInit() { 
    } 


    toggleShowSystemRequirements() { 
    this.showSystemRequirements = !this.showSystemRequirements; 
    } 
    toggleShowPSAT() { 
    this.showPSAT = !this.showPSAT; 
    } 
    toggleShowPHAST() { 
    this.showPHAST = !this.showPHAST; 
    } 
} 

Answer 1

新しい追加しますclearAll関数は単にフラグをfalseにリセットして、すべてのカードの関数を呼び出すだけです。

toggleShowSystemRequirements() { 
    if(this.showSystemRequirements == false){ 
    this.clearAll() 
    } 

    this.showSystemRequirements = !this.showSystemRequirements; 
    } 


clearAll(flag){ 
this.showSystemRequirements = false; 
this.showPHAST = false; 
this.showPSAT = false; 
}