Обратитесь к объекту, инициализированному асинхронно с HTTP-сервисом

Question

У меня есть класс, который содержит массив объекта с именем LearningElementDTO, который инициализируется в методе ngOnInit () асинхронно с наблюдаемым. у меня проблема, когда я пытаюсь ссылаться на этот массив при загрузке компонента, я получаю ошибку: не могу прочитать свойство '0' из неопределенного

проблема здесь в том, что я ссылаюсь на объект LearningElementDTO[0] перед тем, как он был инициализирован.

  private learningElements: LearningElementDTO[];

  constructor(private service: LearningService) { }

  ngOnInit() {
    this.loadData();

    // here is where the undefined problem happens 
    console.log(this.learningElements[0].name);
  }
  private loadData(): void {
    this.service.getLearningElements().subscribe(
      (reponse: any) => {
        this.learningElements = reponse;
      }
    );
  }
}

есть ли обходной путь, чтобы избежать ссылки на объекты, которые инициализируются таким же образом?

Answer 1

Когда ваш console.log выполнен, ответ еще не вернулся. Вам нужно переместить этот код в вашу функцию subscribe после того, как вы назначите ответ сервера своей локальной переменной this.learningElements

this.service
    .getLearningElements()
    .subscribe(response => {
        this.learningElements = response;
        console.log(this.learningElements[0].name);
    });

Answer 2

Вы можете использовать pipe для этого:

private learningElements: LearningElementDTO[];

constructor(private service: LearningService) { }

ngOnInit() {
    this.loadData().subscribe(reponse => {
      console.log(this.learningElements[0].name);
    });
}

private loadData(): Observable<LearningElementDTO[]>{
    return this.service.getLearningElements().pipe(
      map((reponse: any) => {
        this.learningElements = reponse;
        return response;
      })
     );
  }
}