我正在尝试开发一个带有最新版离子和角度的测验应用程序。我有一个数组中每个问题的答案！我发现很难得到我的组件视图中的子数组的答案，虽然我可以通过插值看到我的html中的每个答案！任何想法都将非常感谢!!以下是我的代码
html页面
<ion-header>
<ion-navbar color='primary'>
<ion-buttons start>
<button ion-button color="white" (click)="confirmLeave()">Cancel</button>
</ion-buttons>
<ion-title>{{pagename}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides pager class="slides">
<ion-spinner name="bubbles" *ngIf="questions == 0" > </ion-spinner>
<ion-slide *ngFor="let question of questions; let i = index;">
<p style="text-align: center;" ><button click="goToSlide()" style="border-radius: 50%" ion-button ><strong>{{i+1}}</strong></button></p>
<ion-card >
{{inputs[i]}}
<br><p align="justify" padding>{{question.question}}</p><br>
<ion-item>
<button (click)="prevSlide()" ion-fab class="fabsize" item-start><ion-icon name="arrow-back"></ion-icon></button>
<button (click)="nextSlide()" ion-fab class="fabsize" item-end><ion-icon name="arrow-forward" ></ion-icon></button>
</ion-item>
<ion-list no-lines radio-group color='primary' [(ngModel)]="inputs[index]">
<ion-item>
<ion-label><p>{{question.optiona}}</p></ion-label>
<ion-radio value="a"></ion-radio>
</ion-item>
<ion-item>
<ion-label><p>{{question.optionb}}</p></ion-label>
<ion-radio value="b"></ion-radio>
</ion-item>
<ion-item>
<ion-label><p>{{question.optionc}}</p></ion-label>
<ion-radio value="c"></ion-radio>
</ion-item>
<ion-item>
<ion-label><p>{{question.optiond}}</p></ion-label>
<ion-radio value="d"></ion-radio>
</ion-item>
</ion-list>
<br>
<button class="submit" ion-button (click)="submitAnswer()" *ngIf="i == lastindex" >SUBMIT</button>
</ion-card>
</ion-slide>
</ion-slides>
<ion-list>
</ion-list>
</ion-content>
组件
import { Component, ViewChild, Input } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides, ToastController,ViewController, AlertController, Navbar } from 'ionic-angular';
import { ServiceProvider } from '../../providers/service/service';
import {QuizpagePage} from '../quizpage/quizpage';
import {ResultPage} from '../result/result'
@IonicPage()
@Component({
selector: 'page-main-activity',
templateUrl: 'main-activity.html',
})
export class MainActivityPage {
@Input() question;
@ViewChild(Slides) slides: Slides;
@ViewChild(Navbar) navBar: Navbar;
lastindex = 29;
swiper: any;
public query; //imp
public questions; //imp
public pagename; //imp
public index=0 ;
public message;
answers = [];
public correctanswers;
public inputs = [];
constructor(public navCtrl: NavController, public navParams: NavParams,
private service: ServiceProvider, public toastCtrl: ToastController, private alertCtrl: AlertController,
public viewCtrl: ViewController
) {
this.query = this.navParams.get('value');
if (this.query == "1") {
this.pagename = "Maths Test";
console.log("Getting Maths");
this.service.getMaths()
.subscribe(res => {
this.questions = res;
})
} else if (this.query == "2") {
this.pagename = "English Test";
//Called after the constructor, initializing input properties, and the first call to ngOnChanges.
//Add 'implements OnInit' to the class.
this.service.getEnglish()
.subscribe(res => {
this.questions = res;
})
} else if (this.query == "3") {
this.pagename = "General Paper";
this.service.getGeneralPaper()
.subscribe(res => {
this.questions = res;
})
} else if (this.query == "4") {
this.pagename = "Maths and English";
this.service.getMaths_English()
.subscribe(res => {
this.questions = res;
})
} else if (this.query == "5") {
this.pagename = "English and General Paper";
this.service.getEnglish_Generalpaper()
.subscribe(res => {
this.questions = res;
})
console.log("English and General Paper")
} else if (this.query == "6") {
this.pagename = "Maths and General Paper";
this.service.getMaths_GeneralPaper()
.subscribe(res => {
this.questions = res;
})
console.log("Maths and General Paper")
} else {
console.log("Ooops, there is an error")
}
}
goToSlide(x) {
this.slides.slideTo(x, 500);
}
nextSlide() {
if (this.query == 1 || this.query == 2 || this.query == 3){
this.lastindex = 29;
console.log("Answer: "+this.index)
console.log(this.answers);
this.slides.lockSwipes(false);
this.slides.slideNext();
this.slides.lockSwipes(true);
this.index = this.slides.getActiveIndex();
if (this.index == this.lastindex) {
let toast = this.toastCtrl.create({
message: "This is the last question, swipe back if you have not answered some questions else,click SUBMIT", duration: 3000
});
toast.present();
console.log("You have finished test");
}
}else {
this.lastindex = 29;
this.inputs = (this.inputs[this.index])
console.log(this.inputs[this.index])
this.slides.lockSwipes(false);
this.slides.slideNext();
this.slides.lockSwipes(true);
this.index = this.slides.getActiveIndex();
if (this.index == this.lastindex) {
let toast = this.toastCtrl.create({
message: "This is the last question, swipe back if you have not answered some questions else,click SUBMIT", duration: 3000
});
toast.present();
}
}
}
prevSlide() {
this.slides.lockSwipes(false);
this.slides.slidePrev();
this.slides.lockSwipes(true);
this.index = this.slides.getActiveIndex();
if (this.index == 0) {
let toast = this.toastCtrl.create({
message: "No previous Question", duration: 3000
});
toast.present();
}
}
presentConfirm() {
console.log(this.questions.answer);
for (let i = 0; i < this.lastindex+1; i++){
this.answers[i] = this.inputs[i];
}
console.log(this.correctCount())
let alert = this.alertCtrl.create({
title: 'SUBMIT?',
message: 'After submission, you cant go back to edit your answers oh, Swipe arrow buttons to move to the next and previous questions',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
}
},
{
text: 'SUBMIT',
handler: () => {
this.navCtrl.push(ResultPage, {
questions: this.questions,
answers: this.answers,
score: this.correctCount()
});
}
}
]
});
alert.present();
}
submitAnswer() {
this.presentConfirm();
}
restartQuiz() {
this.slides.lockSwipes(false);
this.slides.slideTo(1, 1000);
this.slides.lockSwipes(true);
}
clicked(value) {
console.log(value);
}
backtoDashboard(){
this.navCtrl.popTo(QuizpagePage);
}
ionViewDidLoad() {
this.viewCtrl.showBackButton(false);
this.slides.lockSwipes(true);
}
confirmLeave() {
let alert = this.alertCtrl.create({
title: 'BACK TO DASHBOARD?',
message: 'Are you sure you want to go back to dashboard, all answered questions data will be lost',
buttons: [
{
text: 'YES',
role: 'cancel',
handler: () => {
this.navCtrl.popTo(QuizpagePage);
}
},
{
text: 'NO',
handler: () => {
}
}
]
});
alert.present();
}
correctCount(){
let count = 1;
for (let i = 0; i < this.lastindex; i++){
if (this.answers[i] === this.question.answer){
count+=1;
}
}
return count;
}
}
JSON中的阵列数据
[{"question":"From\r\nthe list of words lettered A to D choose the one that is \r\nmost nearly \r\nopposite \r\nin \r\nmeaning to the underlined word and that will, at the same \r\ntime, \r\ncorrectly fill the gap in \r\nthe sentence: What I have is only a...... of the famous \r\npainting; the \r\noriginal\r\nis \r\nin the\r\nNational Museum","optiona":"duplicate","optionb":"model","optionc":"fake","optiond":"drawing","answer":"a"},{"question":"From options A to D, choose the word or group of words that \r\nbest completes \r\nthe \r\nfollowing sentence: This portion is to be shared between..........","optiona":"us and them","optionb":"we and them","optionc":"us and they","optiond":"we and they","answer":"a"},{"question":"From options A to D, choose the word or group of words that \r\nbest completes \r\nthe \r\nfollowing sentence: She does not remember....... to anyone at the park","optiona":"to talk","optionb":"to be talking","optionc":"talking","optiond":"to have talked","answer":"c"},{"question":"From the list of words lettered A to D choose the one that is most nearly opposite\r\nin meaning to the underlined word and that will, at the same time, correctly fill the\r\ngap in the sentence: Instead of ....... the issue, the speaker digressed to\r\nunimportant matters.","optiona":"summarizing","optionb":"describing","optionc":"revealing","optiond":"addressing","answer":"d"},{"question":"From options A to D, choose the interpretation that you consider \r\nmost \r\nappropriate \r\nfor \r\nthis sentence: All our plans fell through at the last moment. T\r\nhis \r\nmeans that we","optiona":" were exposed","optionb":"delayed","optionc":"were abandoned","optiond":"failed","answer":"d"},{"question":"From the words lettered A to D, choose the word that \r\nbest completes \r\nthe \r\nfollowing\r\nsentence: Many educationists feel that....... Punishm\r\nent should still be \r\nretained in \r\nschools","optiona":"capital","optionb":"corporal","optionc":"corporate","optiond":"physical","answer":"b"},{"question":"From options A to D, choose the interpretation that you consider \r\nmost \r\nappropriate \r\nfor \r\nthis sentence: Ladies and gentlemen, the worst may be \r\nover, but \r\nwe are not out of the \r\nwoods yet. This means that we are","optiona":"still in the forest","optionb":"not yet ready to celebrate our success","optionc":"likely to encounter more difficulties","optiond":"ot sure of ourselves","answer":"c"},{"question":"From the list of words lettered A to D choose the one that is \r\nmost nearly opposite \r\nin \r\nmeaning to the underlined word and that will, at the same \r\ntime, correctly fill the \r\ngap in \r\nthe sentence: The telephone booths were all.... and \r\nI had to wait for more \r\nthan ten \r\nminutes for one to become \r\nvacant","optiona":" locked","optionb":"busy","optionc":"occupied","optiond":" ringing","answer":"c"},{"question":"From options A to D, choose the interpretation that you consider \r\nmost \r\nappropriate \r\nfor \r\nthis sentence: When I leave this country it will be for good. This \r\nmeans that I will","optiona":"never come back","optionb":" leave for better conditions elsewhere","optionc":"become an adventurer","optiond":" improvement ways.","answer":"a"},{"question":"From the list of words lettered A to D choose the one that is most nearly opposite\r\nin meaning to the underlined word and that will, at the same time, correctly fill the\r\ngap in the sentence: While the first battalion halted its march at nightfall, the second\r\n.... to the barracks","optiona":"returned","optionb":"set out","optionc":"proceeded","optiond":"turned up","answer":"c"},{"question":"From\r\nthe words lettered A to D, choose the word that \r\nbest completes \r\nthe \r\nfollowing \r\nsentence: Because the new venture was\r\n.......... Many \r\nbusinessmen and \r\nwomen went into \r\nit.","optiona":"rich","optionb":"manageable","optionc":"lucrative","optiond":"satisfying","answer":"c"},{"question":"From options A to D, choose the interpretation that you consider \r\nmost \r\nappropriate \r\nfor \r\nthis sentence: Ojo decided that the best course of action \r\nwas to \r\nplay along with them for \r\ntime being. This means that he decided to","optiona":"join their them temporarily","optionb":"entertain them for a while","optionc":"pretend to agree with them","optiond":" be playful with them","answer":"c"},{"question":"From the words letter A to D, choose the word that is \r\nnearest in meaning \r\nto the \r\nunderlined word as it is \r\nused in the sentence: Why should\r\nI \r\nretract\r\nmy statement \r\nwhen it is nothing but the truth?","optiona":"alter","optionb":"deny","optionc":"withdraw","optiond":"condemn","answer":"c"},{"question":"From the words lettered A to D, choose the word that \r\nbest completes \r\nthe \r\nfollowing \r\nsentence: I...... that our team will win the match tomorrow","optiona":"certify","optionb":"conclude","optionc":"announce","optiond":"predict","answer":"d"},{"question":"From the list of words lettered A to D choose the one that is \r\nmost nearly opposite \r\nin \r\nmeaning to the un\r\nderlined word and that will, at the same \r\ntime, correctly fill the \r\ngap in \r\nthe sentence: Last night, Uncle Joe was blind \r\ndrunk\r\nbut this morning he is \r\nas\r\n..... as a \r\njudge","optiona":"alert","optionb":"saintly","optionc":"strongly","optiond":"sober","answer":"d"},{"question":"From the list of words lettered A to D choose the one that is \r\nmost nearly opposite \r\nin \r\nmeaning to the underlined word and that will, at the sam\r\ne \r\ntime, correctly fill the \r\ngap in \r\nthe sentence: While the first battalion \r\nhalted\r\nits march at nightfall, the second\r\n.... to the \r\nbarracks","optiona":"returned","optionb":"set out","optionc":"proceeded","optiond":"turned up","answer":"c"},{"question":"From options A to D, choose the interpretation that you consider \r\nmost \r\nappropriate \r\nfor \r\nthis sentence: The teacher spoke with his\r\ntongue in his cheek when \r\nhe said that lazy Ade \r\nwas the best pupil. This means that the teacher","optiona":"did not mean what he said","optionb":"was disappointed","optionc":"was angry","optiond":"tried to encourage","answer":"a"},{"question":"From options A to D, choose the interpretation that you consider \r\nmost \r\nappropriate \r\nfor \r\nthis sentence: When she confronted her husband, he hung\r\nhis head \r\nand didn\u2019t answer her \r\nquestions. This means that he w\r\nas","optiona":" defiant","optionb":"ashamed and embarrassed","optionc":" caught unawares","optiond":"angry with her","answer":"b"},{"question":"From the words lettered A to D, choose the word that \r\nbest completes \r\nthe \r\nfollowing \r\nsentence: If the jury\u2019s verdict is \u201cnot guilty,\u201d the defendant will be....","optiona":"acquitted","optionb":"indicted","optionc":"pardoned","optiond":"forgiven","answer":"a"},{"question":"From options A to D, choose the interpretation that you consider \r\nmost \r\nappropriate\r\nfor \r\nthis sentence: The police knew that the suspect was not\r\nbeing \r\nstraight with them. This \r\nmeans that the suspect was","optiona":"not telling the truth","optionb":"not friendly","optionc":"afraid","optiond":"timid","answer":"a"},{"question":"From options A to D, choose the interpretation that you consider \r\nmos\r\nt \r\nappropriate \r\nfor \r\nthis sentence: They did not know what to expect and\r\nso decided to \r\nplay it by it by ear. \r\nThis means that they decided to","optiona":"listen attentively to everyone","optionb":"act according to circumstances","optionc":"pretend to be deaf","optiond":"prepare for the worst","answer":"b"},{"question":"Fill the gap with the appropriate option from the list of options. Sir, I\u2019m not lying \r\nabout the matter, I know nothing of it. If I knew, ________","optiona":"I would tell you","optionb":"I must tell you","optionc":"I can tell you","optiond":"I shall tell you","answer":"a"},{"question":" \r\nFrom the list of words lettered A to D choose the one that is \r\nmost nearly opposite \r\nin \r\nmeaning to the underlined word and that will, at the same \r\ntime, correctly fill the \r\ngap in \r\nthe sentence: Roses are \r\ncommon\r\nin May but.... in November.","optiona":"dead","optionb":"strange","optionc":"rare","optiond":"extinct","answer":"c"},{"question":"From the words letter A to D, choose the word that is \r\nnearest in meaning \r\nto the \r\nunderlined word as it is used in the sentence: It soon beca\r\nme obvious that a \r\nconfrontation \r\nwas \r\ninevitable","optiona":"disastrous","optionb":"unaviodable","optionc":"desirable","optiond":"imminent","answer":"b"},{"question":".\r\nFrom the words letter A to D, choose the word that is \r\nnearest in meaning \r\nto the\r\nunderlined word as it is used in the \r\nsentence: The\r\ndoctor diagnosed the tumour as \r\nmalignant","optiona":"deadly","optionb":"painful","optionc":"trouble","optiond":"minor","answer":"a"},{"question":"From options A to D, choose the word or group of words that \r\nbest completes \r\nthe \r\nfollowing sentence: The chairman told members that he was ope\r\nn ..... \r\nsuggestions","optiona":"to","optionb":"for","optionc":"about","optiond":"on","answer":"a"},{"question":"From the words letter A to D, choose the word that is \r\nnearest in meaning \r\nto the \r\nunderlined word as it is used in the sentence: T\r\nhe police \r\nannounced that they were \r\nyet to \r\napprehend\r\nthe criminals","optiona":"interogated","optionb":"charge","optionc":"prosecute","optiond":"arrest","answer":"d"},{"question":"From the words lettered A to D, choose the word that \r\nbest completes \r\nthe \r\nfollowing \r\nsentence: Freedom of \r\nmovement is a\r\n..... right of every citizen","optiona":"fundamental","optionb":"negotiated","optionc":"privileged","optiond":"respected","answer":"a"},{"question":"From the words lettered A to D, choose the word that \r\nbest completes \r\nthe \r\nfollowing \r\nsentence: When all the items on the agenda had been discussed, the \r\nmeeting was\r\n....... ","optiona":" adjourned","optionb":"dismissed","optionc":"postponed","optiond":"dissolved","answer":"a"},{"question":"From options A to D, choose the word or group of words that \r\nbest completes \r\nthe\r\nfollowing sentence: The committee has submitted its report...... the students","optiona":"in","optionb":"for","optionc":"about","optiond":"on","answer":"d"}]