Problem in angular when I want recover informations of array - html

Question

I have a problem with my angular code.
This is the code in my 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) {
}
}
}
But I have this error in my console :
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
I don't understand this problem especially that my array animaux contains many animals. And I display this array in my html code.
This is ma web page :

Answer 1

Data for this.animaux are fetched asynchronously and there is no guarantee that your recupEspecePresent is called after the data are fetched. You should run that function after the fetching is done:
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
}
}