我正在尝试使用Ionic2进行应用程序,从JSON文件导入问题并在测试中显示它们。我能够成功导入由'uniqueChoiceQuestion'对象组成的数组中的所有问题。但是,当我尝试构造'questionList'数组时,当我尝试在另一个函数中使用它时,我推入它的值就会消失。
我的test.ts
import {Component, OnInit, Input} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
/*----- Question Classes -----*/
import {UniqueChoiceQuestion} from './../../classes/questions/uniqueChoiceQuestion/uniqueChoiceQuestion';
//Has id: number, content: string, options: Array<any>
import {QuestionList} from './../../classes/questions/questionList/questionList'
//Has id: number; type: string;
import {GetList} from './../../services/getList/getList';
@Component({
templateUrl: 'build/pages/test/test.html',
providers: [GetList]
})
export class TestPage implements OnInit {
/*----- Questions array -----*/
public questionsUnique: Array<UniqueChoiceQuestion>;
public questionList: Array<QuestionList>;
public firstQuestion: any;
constructor(private navController: NavController, private getList: GetList) {
}
/* On page init,
the questions array will be initialised,
the questions will be loaded on the arrays
*/
ngOnInit() {
this.setupArrays();
this.loadQuestions();
this.loadFirstQuestion();
}
/* Initializes the questions arrays as empty
*/
setupArrays() {
this.questionsUnique = [];
this.questionList = [];
}
/* Load the JSON data into the correct type of array
*/
processQuestionsData(data) {
for (let i = 0; i < data.length; i++) {
let question = data[i];
this["questions" + question.type].push(question);
this["setUpQuestion" + question.type](this["questions" + question.type].length - 1);
this.questionList.push(new QuestionList(question.id, question.type));
}
//Here, the array is printed correctly with all the questions ids and types
console.log(this.questionList);
}
/* Load data into a UniqueChoiceQuestion array
*/
setUpQuestionUnique(arrayId) {
let container = this.questionsUnique[arrayId];
container.viewConstruct = new UniqueChoiceQuestion(
container.id,
container.content,
container.options
);
}
/* Loads questions from a JSON files
*/
loadQuestions() {
this.getList.load()
.subscribe(
this.processQuestionsData.bind(this),
error => console.log("Test - loadQuestions() - Error: ", error)
);
}
loadFirstQuestion() {
//However, when I try to print the array here, it is empty
console.log(this.questionList);
//That will generate a 'TypeError: Cannot read property 'type' of undefined' error
let firstQuestion = this["questions" + this.questionList[0].type][this.questionList[0].id];
this["setUpQuestion" + this.questionList[0].type](this.questionList[0].id);
console.log(this.firstQuestion);
}
更新我尝试更多地重新编译程序,现在我认为问题是this.load First Question()正在执行this.load Questions()(在ngOnInit上)
加载问题是asynchronous
。所以它从执行async
调用开始,不等待它完成,然后去执行loadFirstQuestion
。在这里你没有得到问题列表,因为它尚未加载。您可以尝试在订阅中调用loadfirstquestion
。
.subscribe(
this.processQuestionsData.bind(this),
error => console.log("Test - loadQuestions() - Error: ", error),
()=>this.loadFirstQuestion();
);