TypeError:无法读取属性'；长度'；在Angular app中未定义的

我正在创建一个用于练习的测验应用程序，需要一次显示一个MCQ。 编写了以下代码，但遇到了标题中所述的错误

通过谷歌搜索关于堆栈溢出的其他类似问题，我尝试了他们的解决方案：尝试了控制台日志记录，如果Node_Modules/typescript中缺少任何文件，但一切都很完美。还尝试将Node_模块和CLI更新到最新版本，但没有成功

quick.component.ts:

export class QuizComponent implements OnInit {
  radio1: string;
  value: string;
  target: any;
  quizName = 'QUIZ APPLICATION';
  counter=0;
questArray: any[];
questArray1:any[];
questArray2: any[];

  constructor(private newService: MyDataService) //service define
   { }
  ngOnInit() { 
    this.newService.fetchData()
    .subscribe(response => this.questArray = response.json());
  `   `
  this.callingArray();  

  }

    callingArray() {

    for(var i=0;i<=this.questArray.length;i++)
    {
        this.questArray1=this.questArray[i];
        this.questArray2=this.questArray[i+1];   
    }
     }

export class MyDataService {
  constructor(private http: Http) 
  {}
  fetchData()
      {
        return this.http
        .get('../assets/questions.json');
      }   
}

[  
  {
    "QUES":"The Government of India (GoI) has launched the web-based application e-FRRO scheme for foreigners. What does ‘FRRO’ stands for ?",
    "OP":[ "Foreigners Regional Registration Office", "Foreigners Registry Registration Office", "Foreigners Reacceptance Registration Office", "Foreigners Regaining Registration Office" ]
},

  {

        "QUES": "H",
        "OP":["ADASD" , "ASDAD", "ASDASD", "ASDADS"]

    }

]

<div *ngFor="let abc of questArray1;let j = index" >

           {{j+1}}.{{abc.QUES}}

        <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>

        </div>

我真的不想错过什么

JSON:

export class QuizComponent implements OnInit {
  radio1: string;
  value: string;
  target: any;
  quizName = 'QUIZ APPLICATION';
  counter=0;
questArray: any[];
questArray1:any[];
questArray2: any[];

  constructor(private newService: MyDataService) //service define
   { }
  ngOnInit() { 
    this.newService.fetchData()
    .subscribe(response => this.questArray = response.json());
  `   `
  this.callingArray();  

  }

    callingArray() {

    for(var i=0;i<=this.questArray.length;i++)
    {
        this.questArray1=this.questArray[i];
        this.questArray2=this.questArray[i+1];   
    }
     }

export class MyDataService {
  constructor(private http: Http) 
  {}
  fetchData()
      {
        return this.http
        .get('../assets/questions.json');
      }   
}

[  
  {
    "QUES":"The Government of India (GoI) has launched the web-based application e-FRRO scheme for foreigners. What does ‘FRRO’ stands for ?",
    "OP":[ "Foreigners Regional Registration Office", "Foreigners Registry Registration Office", "Foreigners Reacceptance Registration Office", "Foreigners Regaining Registration Office" ]
},

  {

        "QUES": "H",
        "OP":["ADASD" , "ASDAD", "ASDASD", "ASDADS"]

    }

]

<div *ngFor="let abc of questArray1;let j = index" >

           {{j+1}}.{{abc.QUES}}

        <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>

        </div>

HTML:

export class QuizComponent implements OnInit {
  radio1: string;
  value: string;
  target: any;
  quizName = 'QUIZ APPLICATION';
  counter=0;
questArray: any[];
questArray1:any[];
questArray2: any[];

  constructor(private newService: MyDataService) //service define
   { }
  ngOnInit() { 
    this.newService.fetchData()
    .subscribe(response => this.questArray = response.json());
  `   `
  this.callingArray();  

  }

    callingArray() {

    for(var i=0;i<=this.questArray.length;i++)
    {
        this.questArray1=this.questArray[i];
        this.questArray2=this.questArray[i+1];   
    }
     }

export class MyDataService {
  constructor(private http: Http) 
  {}
  fetchData()
      {
        return this.http
        .get('../assets/questions.json');
      }   
}

[  
  {
    "QUES":"The Government of India (GoI) has launched the web-based application e-FRRO scheme for foreigners. What does ‘FRRO’ stands for ?",
    "OP":[ "Foreigners Regional Registration Office", "Foreigners Registry Registration Office", "Foreigners Reacceptance Registration Office", "Foreigners Regaining Registration Office" ]
},

  {

        "QUES": "H",
        "OP":["ADASD" , "ASDAD", "ASDASD", "ASDADS"]

    }

]

<div *ngFor="let abc of questArray1;let j = index" >

           {{j+1}}.{{abc.QUES}}

        <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>
      <input type="radio" name="s">{{abc.OP[j]}}

      <br>

        </div>

{{j+1}}.{{abc.QUES}


{{abc.OP[j]}


{{abc.OP[j]}


{{abc.OP[j]}


{{abc.OP[j]}

您的数组迭代发生在您从observable获取任何数据之前。尝试将代码修改为以下内容：

this.newService.fetchData().subscribe(response => {
   this.questArray = response.json();
   this.callingArray();
});

---

this.callingArray（）

不在订阅范围内，因此数据尚未到达。另外，您不需要编写es6/TypeScript中的循环。Did console.log可能是重复的，questArray1返回为“未定义”的更新问题，带有JSON和HTML供参考