Angular 2 + Ionic 2：对象推送到数组，但是当我尝试使用它时它为空

Question

I'm trying to do an application with Ionic2 with imports questions from a JSON file and display them in a test. I was able to successfully import all the questions in the array made of 'uniqueChoiceQuestion' objects. However, when I try to construct the 'questionList' array, the values I pushed into it disappear when I try to use it in another function.

My 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);
  }

UPDATE I tried debbuging the program more and now I believe the problem is that this.loadFirstQuestion() is being executed before this.loadQuestions() (on ngOnInit)

Answer 1

Load questions is asynchronous . So it starts by executing the async call, doesnt wait for it to complete, then goes to execute loadFirstQuestion . Here you don't get the question list because it isn't loaded yet. You can try calling loadfirstquestion in subscribe.

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