angular2のリストを1つずつ表示

Question

私は質問のリストを表示しようとしています。ユーザーがsubmitをクリックすると、次の質問が表示されます。今のところ、すべての質問をページに表示できます。他の投稿のように旗を使ってみましたが、成功しませんでした。私はこれについてどうやって行くのですか？これはフラグなしの適切な作業コードです。

<div class="card" *ngIf="!isLoading"> 
    <div class="card-block text-md-center" *ngFor="let question of questions"> 
    <form> 
     <fieldset class="form-group"> 
     <h1>{{question.name}}</h1> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" 
       checked> 
      {{question.a_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> 
      {{question.b_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3"> 
      {{question.c_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios4" value="option4"> 
      {{question.d_Answer}} 
      </label> 
     </div> 
     </fieldset> 
     <button type="submit" class="btn btn-primary">Submit</button> 
    </form> 
    </div> 
</div> 

これは、インデックスに基づいて質問を隠すことによって試したコードです。 1つの質問を表示しますが、送信がクリックされたときに次の質問に移動しません。

<div class="card" *ngIf="!isLoading"> 
    <div class="card-block text-md-center" *ngFor="let question of questions; let i=index"> 
    <form [hidden]="currentQuestionNumber !== i"> 
     <fieldset class="form-group"> 
     <h1>{{question.name}}</h1> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" 
       checked> 
      {{question.a_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> 
      {{question.b_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3"> 
      {{question.c_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios4" value="option4"> 
      {{question.d_Answer}} 
      </label> 
     </div> 
     </fieldset> 
     <button type="submit" class="btn btn-primary" onclick="setGoToNextTrue()">Submit</button> 
    </form> 
    </div> 
    </div> 
</div> 

ありがとうございます、ありがとうございます！

Component.ts

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 
import { ToastComponent } from '../shared/toast/toast.component'; 
import { DataService } from '../services/data.service'; 

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

    questions = []; 
    isLoading = true; 

    currentQuestionNumber; 

    question = {}; 

    addQuestionForm: FormGroup; 
    name = new FormControl('', Validators.required); 
    a_Answer = new FormControl('', Validators.required); 
    b_Answer = new FormControl('', Validators.required); 
    c_Answer = new FormControl('', Validators.required); 
    d_Answer = new FormControl('', Validators.required); 

    constructor(private http: Http, 
       private dataService: DataService, 
       public toast: ToastComponent, 
       private formBuilder: FormBuilder) 
    { 
    this.currentQuestionNumber = 0; 
    } 

    ngOnInit() { 
    this.getQuestions(); 
    //this.currentQuestionNumber = 0; 

    this.addQuestionForm = this.formBuilder.group({ 
     name: this.name, 
     a_Answer: this.a_Answer, 
     b_Answer: this.b_Answer, 
     c_Answer: this.c_Answer, 
     d_Answer: this.d_Answer 
    }); 
    } 

    getQuestions() { 
    this.dataService.getQuestions().subscribe(
     data => this.questions = data, 
     error => console.log(error), 
    () => this.isLoading = false 
    ); 
    } 

    setGoToNextTrue() 
    { 
    this.currentQuestionNumber++; 
    } 

} 

試み＃2

component.html

<div class="card" *ngIf="isLoading"> 
    <h4 class="card-header">Loading...</h4> 
    <div class="card-block text-xs-center"> 
    <i class="fa fa-circle-o-notch fa-spin fa-3x"></i> 
    </div> 
</div> 

<div class="card" *ngIf="!isLoading"> 
    <div class="card-block text-md-center"> 
    <form (ngSubmit)="onSubmit()"> 
     <fieldset class="form-group hide" *ngFor="let question of questions;let i=index" [class.show]="i == questionIndex"> 
     <h1>{{question.name}}</h1> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" 
       checked> 
      {{question.a_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> 
      {{question.b_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3"> 
      {{question.c_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios4" value="option4"> 
      {{question.d_Answer}} 
      </label> 
     </div> 
     </fieldset> 
     <p *ngIf="questionIndex == (questions.length - 1)">This is the last one.</p> 
     <button type="submit" class="btn btn-primary" onclick="setGoToNextTrue">Submit</button> 
    </form> 
    </div> 
</div> 

component.ts

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 
import { ToastComponent } from '../shared/toast/toast.component'; 
import { DataService } from '../services/data.service'; 

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

    questions = []; 
    isLoading = true; 

    //currentQuestionNumber; 
    questionIndex = 0; 

    question = {}; 

    addQuestionForm: FormGroup; 
    name = new FormControl('', Validators.required); 
    a_Answer = new FormControl('', Validators.required); 
    b_Answer = new FormControl('', Validators.required); 
    c_Answer = new FormControl('', Validators.required); 
    d_Answer = new FormControl('', Validators.required); 

    constructor(private http: Http, 
       private dataService: DataService, 
       public toast: ToastComponent, 
       private formBuilder: FormBuilder) 
    { 
    } 

    ngOnInit() { 
    this.getQuestions(); 
    //this.currentQuestionNumber = 0; 
    for(let i = 1; i < 4; i++) { 
     this.addQuestionForm = this.formBuilder.group({ 
     name: this.name, 
     a_Answer: this.a_Answer, 
     b_Answer: this.b_Answer, 
     c_Answer: this.c_Answer, 
     d_Answer: this.d_Answer 
     }); 
    } 

    this.isLoading = false; 

    } 

    getQuestions() { 
    this.dataService.getQuestions().subscribe(
     data => this.questions = data, 
     error => console.log(error), 
    () => this.isLoading = false 
    ); 
    } 

    private onSubmit() { 
    if(this.questionIndex < (this.questions.length - 1)) { 
     this.questionIndex++; 
    } 
    } 


} 

Answer 1

を提出あなたは配列に一つの質問をプッシュすることができますサブミットをするときクリックするか、indexを使用していくつかの質問を非表示にしてください。 デモがありますhttps://embed.plnkr.co/lc6GBFzcjS2Ly0z5QXZT/

Answer 2

各フォームのテンプレートには[hidden]ディレクティブを使用できます。 テンプレートを生成するとき、各フォームは質問配列の質問のインデックスに関連付けられます。 コードの中に現在表示されている質問を宣言するプロパティを宣言する必要があります。

constructor(){ 
    this.currentQuestionNumber = 0; 
} 
setGoToNextTrue(){ 
    this.currentQuestionNumber++; 
    //Other stuff.. for exmaple checking that you've reach the last question 
} 

コンストラクタでは、デフォルトでは、最初の質問を配列に表示することができます。 次に、あなたのテンプレートは次のようになります。あなたのソリューションは、一度質問を追加していますが

<div class="card" *ngIf="!isLoading"> 
    <div class="card-block text-md-center" *ngFor="let question of questions;let i=index"> 
    <div *ngIf ="nextQuestion"> 
    <form [hidden]="currentQuestionNumber !== i"> 
     <fieldset class="form-group"> 
     <h1>{{question.name}}</h1> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" 
       checked> 
      {{question.a_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> 
      {{question.b_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3"> 
      {{question.c_Answer}} 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="form-check-label"> 
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios4" value="option4"> 
      {{question.d_Answer}} 
      </label> 
     </div> 
     {{setGoToNextFalse()}} 
     </fieldset> 
     <button type="submit" class="btn btn-primary" onclick="setGoToNextTrue()">Submit</button> 
    </form> 
    </div> 
    </div> 
</div>