Angular 2 + Ionic 2:对象推送到数组,但是当我尝试使用它时它是空的

问题描述 投票:0回答:1

我正在尝试使用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上)

arrays angular typescript ionic2
1个回答
1
投票

加载问题是asynchronous。所以它从执行async调用开始,不等待它完成,然后去执行loadFirstQuestion。在这里你没有得到问题列表,因为它尚未加载。您可以尝试在订阅中调用loadfirstquestion

.subscribe(
  this.processQuestionsData.bind(this),
  error => console.log("Test - loadQuestions() - Error: ", error),
  ()=>this.loadFirstQuestion();
);
© www.soinside.com 2019 - 2024. All rights reserved.