Проблема в angular, когда я хочу восстановить информацию массива

Question

У меня проблема с моим angular кодом. Это код в моем animal.component.ts:

import { Component, OnInit } from '@angular/core';
import { AnimalService } from "./animal.service";
import { Animal } from "./animal";

@Component({
  selector: 'app-animal',
  templateUrl: './animal.component.html',
  styleUrls: ['./animal.component.css']
})
export class AnimalComponent implements OnInit {

  private animaux:Array<Animal>;
  private especeAnimalPresente:Array<string>;
  constructor(private animalService: AnimalService) { }

  ngOnInit() {
    this.recupAllAnimals();
    this.recupEspecePresent();
  }

  recupAllAnimals(){
    this.animalService.getAllAnimaux().subscribe(
      data => {console.log(this.animaux), this.animaux = data, console.log(this.animaux)}
    )
  }

  recupEspecePresent(){
    for (let animal of this.animaux) {
    }
  }
}

Но у меня в консоли есть эта ошибка:

ERROR TypeError: "this.animaux is undefined"
    recupEspecePresent animal.component.ts:28
    ngOnInit animal.component.ts:18
    Angular 5
    View_AnimalComponent_Host_0 (index):1
    Angular 26
    RxJS 5
    Angular 11

Я не понимаю этой проблемы, особенно из-за того, что мой массив Анимо содержит много животных. И я отображаю этот массив в моем html коде. Это моя веб-страница:

Answer 1

Данные для this.animaux выбираются асинхронно, и нет никакой гарантии, что ваш recupEspecePresent вызван после того, как данные получены. Вы должны запустить эту функцию после завершения извлечения:

ngOnInit(): void {
  this.recupAllAnimals();
}

recupAllAnimals(): void {
  this.animalService.getAllAnimaux().subscribe(data => {
    this.animaux = data;
    this.recupEspecePrsent();
  })
}

recupEspecePresent(): void {
  for (let animal of this.animaux) {
    // do something
  }
}