Question

我正在尝试显示一个问题列表，当用户点击提交时，将显示下一个问题。现在，我可以在页面上显示所有问题。我尝试使用其他帖子建议的标志，但没有成功。我该怎么做？这是没有标志的适当工作代码。

<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>

这是我通过隐藏基于索引的问题尝试的代码。它会显示一个问题，但在点击提交时不会转到下一个问题。

<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>

在angular2

2 个答案: