时间戳

首页 > 解决方案 > 如何使用角度显示测验应用程序的所有问题

javascript - 如何使用角度显示测验应用程序的所有问题

问题描述

我无法显示所有问题，每当我尝试开始测验时，它只显示第一个问题并显示错误。它显示类型错误无法读取未定义的“问题”属性。每当我点击开始测验时，它会显示第一个问题并显示错误

--选择-- {{i}}.{{title.title}} 

<div class="row" *ngIf="selectQuiz">
    <div class="col s12 m6">
        <button class="btn btn-success" (click)="onSubmit()">Start Quiz</button>

        <div *ngIf="showButton">
          <div class="card-content white-text">
          <div class="card blue-grey darken-1">
            <span class="card-title">{{currentQuestion+1}}</span>
            <p>{{quiz['questions'][currentQuestion]['text']}}</p>

quizcomponent.ts

import { Component, OnInit } from '@angular/core';
import { QuizService } from '../services/quiz.service';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-quiz',
  templateUrl: './quiz.component.html',
  styleUrls: ['./quiz.component.css']
})

export class QuizComponent implements OnInit {
form: FormGroup;
QuizTitles = [];
Quizquestions;
selectQuiz;
quiz;
QID = [];
  answer: any;
 userData: any;
 currentQuestion = 0;
 showButton = false;
 Value;

constructor(
private router: Router,
private quizService: QuizService,
private formBuilder: FormBuilder

) {

}
getTitles() {
this.quizService.getQuiztitles().subscribe(data => {
const aData = Object.values(data);
aData.forEach((title: string, id: number) => {
 this.QuizTitles.push({
  title,
id
               });
      });

});
}
onSubmit() {
this.showButton = true;
this.quizService.getQuizQuestions(this.Value).subscribe(data => {
this.quiz = data;
console.log(this.quiz.questions[this.currentQuestion].text);
});
}


startQuiz(value) {
this.Value = value;
}
ngOnInit() {
this.getTitles();
}





OnSubmit() {
console.log(this.answer);
}
}

标签： javascriptangulartypescript

解决方案

当您加载组件时，您的quiz属性不存在，因为您正在订阅中更新它。

{{测验['questions'][currentQuestion]['text']}}

推荐阅读