一度に最初のdivだけを表示し、ほかのdivをすべて非表示にしたい

Question

一度に最初のdivだけを表示し、他のdivをすべて非表示にしたかったのです。ボタンのクリックで2番目のdivを表示し、他のすべてのdivを非表示にする必要があります。

コンポーネントテンプレート：

@Component({ 
    selector: 'question', 
    template: `<div class="slide-{{question.id}}" [ngClass]="{hide: isOn}" *ngFor="let question of questions"> 
      <div class="section-head text-center">{{question.heading}}</div> 
      <div class="section-desc text-center">{question.description}}</div> 
      </div> 

<div class="action"> 
    <div class="col-md-12 text-center"> 
     <button type="button" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button> 
     <button (click)="toggle(!isOn)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button> 
    </div> 
</div>` 
}) 

クラス：

export class Question{ 
    id: number; 
    heading: string; 
    description: string; 
    field: string; 
    isOn = false; 
    toggle(newState) { 
     this.isOn = newState; 
    } 
} 

Answer 1

これはあなたが望むものであるかどうかわかりません。

インデックスに変数iを追加し、現在のインデックスが変数showIdxと等しくない場合は、hiddenをtrueに設定しました。あなたが代わりにブール値のisOnのためのオブジェクトを定義する必要があり

@Component({ 
    selector: 'question', 
    template: `<div class="slide-{{question.id}}" [ngClass]="{hide: isOn}" *ngFor="let question of questions let i=index" [hidden]="i !== showIdx"> 
      <div class="section-head text-center">{{question.heading}}</div> 
      <div class="section-desc text-center">{question.description}}</div> 
      </div> 

<div class="action"> 
    <div class="col-md-12 text-center"> 
     <button type="button" (click)="showIdx++" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button> 
     <button (click)="toggle(!isOn)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button> 
    </div> 
</div>` 
}) 

export class Question{ 
    showIdx = 0; 

    id: number; 
    heading: string; 
    description: string; 
    field: string; 
    isOn = false; 
    toggle(newState) { 
     this.isOn = newState; 
    } 
} 

Answer 2

：ボタンの上に私はshowIdx変数をインクリメントクリックしてください。ここではサンプルです：

isOn: {} 

toggle(question) { 
    Object.keys(isOn).forEach(key => { 
    if (key != question.id) { 
     isOn[question.id] = false; 
    } 
    }); 
    isOn[question.id] = !isOn[question.id]; 
} 

とテンプレートで：

template: ` 
    <div class="slide-{{question.id}}" 
     [ngClass]="{hide: isOn[question.id]}" 
     *ngFor="let question of questions"> 
    <div class="section-head text-center">{{question.heading}}</div> 
    <div class="section-desc text-center">{question.description}}</div> 

    <div class="action"> 
     <div class="col-md-12 text-center"> 
     <button type="button" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button> 
     <button (click)="toggle(question)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button> 
    </div> 
    </div> 
</div> 
`