角2 +イオン2：オブジェクトを配列にプッシュしますが、使用しようとすると空です。

Question

JSONファイルから質問をインポートしてIonic2でアプリケーションを作成しようとしています。私は '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); 
    } 

私はより多くのプログラムをdebbugingしようと、今、私は問題はthis.loadFirstQuestionは、（）（this.loadQuestions前に実行されていることであると信じてい UPDATE）（ngOnInit上）

Answer 1

質問の負荷はasynchronousです。したがって、asyncコールを実行して開始し、完了するまで待ってからloadFirstQuestionを実行します。ここではまだ読み込まれていないので質問リストは表示されません。あなたはサブスクライブでloadfirstquestionを呼び出すことができます。

.subscribe(
    this.processQuestionsData.bind(this), 
    error => console.log("Test - loadQuestions() - Error: ", error), 
()=>this.loadFirstQuestion(); 
);