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

Posted 2023-03-13

【中文标题】Angular 2 + Ionic 2：对象推送到数组，但是当我尝试使用它时它是空的

【英文标题】：Angular 2 + Ionic 2: objects push to array, but it is empty when I try to use it

【发布时间】：2016-12-26 16:40:43

【问题描述】：

我正在尝试使用 Ionic2 做一个应用程序，从 JSON 文件导入问题并在测试中显示它们。我能够成功导入由“uniqueChoiceQuestion”对象组成的数组中的所有问题。但是，当我尝试构建“questionList”数组时，当我尝试在另一个函数中使用它时，我推入其中的值会消失。

我的测试.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.loadFirstQuestion() 在 this.loadQuestions() 之前执行（在 ngOnInit 上）

【参考方案1】：

加载问题是asynchronous。所以它首先执行async 调用，不等待它完成，然后去执行loadFirstQuestion。在这里你没有得到问题列表，因为它还没有加载。您可以尝试在订阅中拨打loadfirstquestion。

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