错误TypeError：无法读取Object.eval中未定义的属性'0'。角度10

Question

当我尝试从JSON获取数据时出现此错误，这是我的Spring Boot应用程序对Angular的响应。我想为在线考试系统创建一个端到端项目，但是由于无法在前端（角度）上显示问题，因此我停留了一段时间。

test.component.html （在* ngFor，我收到此错误。）

<div class="progress">
  <div class="determinate" [style.width.%]="(testService.qnProgress+1)*10"></div>
</div>
<div class="card blue-grey darken-1">
  <div class="card-content white-text">
    <span class="card-title">{{testService.qnProgress+1}}</span>
    <p>{{testService.qns[testService.qnProgress].Qn}}</p>
  </div>
  <div class="card-action">
    <ul class="collection answer">
      <ng-container *ngFor="let option of testService.qns[testService.qnProgress]?.Options;let i = index">
        <li *ngIf="option != null" class="collection-item" (click)="Answer(testService.qns[testService.qnProgress]?.QnID,i)">
          {{option}}
        </li>
      </ng-container>
    </ul>
  </div>
</div>

test.component.ts

import { Component, OnInit } from '@angular/core';
import { TestService } from '../_services/test-service.service';
import { Router } from '@angular/router';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor( private router: Router, private testService: TestService) { }

  ngOnInit() {
if (parseInt(localStorage.getItem('seconds')) < 0) {
      this.testService.seconds = parseInt(localStorage.getItem('seconds'));
      this.testService.qnProgress = parseInt(localStorage.getItem('qnProgress'));
      this.testService.qns = JSON.parse(localStorage.getItem('qns'));
      if (this.testService.qnProgress == 10)
        this.router.navigate(['/result']);
      else
        this.startTimer();
   }
   else {
      this.testService.seconds = 0;
      this.testService.qnProgress = 0;
      this.testService.getQuestions().subscribe(
        (data: any) => {
          this.testService.qns = data;
          this.startTimer();
        }
      );
   }
  }

  startTimer() {
    this.testService.timer = setInterval(() => {
      this.testService.seconds++;
      localStorage.setItem('seconds', this.testService.seconds.toString());
    }, 1000);
  }

  Answer(qID, choice) {
    this.testService.qns[this.testService.qnProgress].answer = choice;
    localStorage.setItem('qns', JSON.stringify(this.testService.qns));
    this.testService.qnProgress++;
    localStorage.setItem('qnProgress', this.testService.qnProgress.toString());
    if (this.testService.qnProgress == 10) {
      clearInterval(this.testService.timer);
      this.router.navigate(['/result']);
    }
  }

}

test-service.service.ts

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import {Injectable} from "@angular/core";


@Injectable({
providedIn: 'root'
})
export class TestService{


readonly rootUrl = 'http://localhost:8080/api/auth';
qns: any[];
seconds: number;
timer;
qnProgress: number=1;
correctAnswerCount: number = 0;

//---------------- Helper Methods---------------
constructor(private http: HttpClient) { }
displayTimeElapsed() {
  return Math.floor(this.seconds / 3600) + ':' + Math.floor(this.seconds / 60) + ':' + Math.floor(this.seconds % 60);
}

getParticipantName() {
  var participant = JSON.parse(localStorage.getItem('participant'));
  return participant.Name;
}


//---------------- Http Methods---------------

insertParticipant(name: string, email: string) {
  var body = {
    Name: name,
    Email: email
  }
  return this.http.post(this.rootUrl + '/InsertParticipant', body);
}

getQuestions() {
  return this.http.get(this.rootUrl + '/Questions');
}

getAnswers() {
  var body = this.qns.map(x => x.QnID);
  return this.http.post(this.rootUrl + '/Answers', body);
}

submitScore() {
  var body = JSON.parse(localStorage.getItem('participant'));
  body.Score = this.correctAnswerCount;
  body.TimeSpent = this.seconds;
  return this.http.post(this.rootUrl + "/UpdateOutput", body);
}

}