angular - 如何从通过 http.get 带来的数组中获取元素？

Question

我通过 Angular 中的 http get 请求带来了一系列 Question 对象。现在我无法从中获取元素：Cannot read property '0' of undefined. 我的猜测是请求是异步的，当我尝试获取元素时它不会加载。

这是我获取问题数组的组件，我尝试获取当前问题：

import { formatDate } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { IndividualSession } from 'src/app/_models/individual-session';
import { Question } from 'src/app/_models/question';
import { User } from 'src/app/_models/user';
import { AccountService } from 'src/app/_services/account.service';
import { IndividualSessionService } from 'src/app/_services/individual-session.service';
import { NavbarService } from 'src/app/_services/navbar.service';
import { QuestionsService } from 'src/app/_services/questions.service';
import { UsersService } from 'src/app/_services/users.service';

@Component({
  selector: 'app-exam-in-progress',
  templateUrl: './exam-in-progress.component.html',
  styleUrls: ['./exam-in-progress.component.css']
})

export class ExamInProgressComponent implements OnInit {
  individualSession: IndividualSession;
  user: User;
  currentUser$: Observable<User>;
  questions: Question[];
  currentQuestion: Question;

  constructor(public navService: NavbarService, 
    public individualSessionService: IndividualSessionService,
    public userService: UsersService,
    public accountService: AccountService,
    private questionService: QuestionsService) { }

  ngOnInit(): void {
    this.navService.hide();

    this.startNewSession();
  }

  private startNewSession() {
    this.getCurrentUserData();

    if (localStorage.getItem('currentIndividualSession') === null) {
      this.individualSession = <IndividualSession>{
        ability: 0.5,
        standardError: 1,
        startTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss', 'en-us'),
        examineeId: 1,
        sessionId: 1
      };

      localStorage.setItem('currentIndividualSession', JSON.stringify(this.individualSession));
    }

    let json = localStorage.getItem('currentIndividualSession');
    this.individualSession = JSON.parse(json);
    this.loadQuestions();

    this.currentQuestion = this.questions[0];
  }

  stopTest() {
    this.navService.show();
  }

  onNextClick() {
    this.individualSession.standardError-=0.1;
  }

  private getCurrentUserData() {
    this.currentUser$ = this.accountService.currentUser$;
    this.currentUser$.subscribe(currUser => {
      if(!!currUser) {
        this.loadUser(currUser.email);
      }
    })
  }

  loadUser(email: string) {
    this.userService.getUser(email).subscribe(user => {
      this.user = user;
    })
  }

  loadQuestions() {
    this.questionService.getQuestionsFromQuestionnaire(1).subscribe(questions => {
      this.questions = questions;
    });
  }


}

这是我的服务：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Question } from '../_models/question';

@Injectable({
  providedIn: 'root'
})
export class QuestionsService {
  baseUrl = environment.apiUrl;

  constructor(private http: HttpClient) { }

  getQuestionsFromQuestionnaire(questionnaireId: number) {
    return this.http.get<Question[]>(this.baseUrl + 'questionnaires/' + questionnaireId + '/questions');
  }
}

标签： angulartypescriptasynchronous

Answer 1

你能试一下吗？

loadQuestions() {
   this.questionService.getQuestionsFromQuestionnaire(1).subscribe(questions => {
      this.questions = questions;
      this.currentQuestion = this.questions[0];
   });
}

并this.currentQuestion = this.questions[0];从 startNewSession() 方法中删除。