Bonjour, j'injecte des données via nodeJS, MongoDB vers mon composant Angular :

Dans mon .ts, j'ai ça :

this.http.get('http://localhost:3001/connect/' + sessionStorage.getItem('name') + '/' + sessionStorage.getItem('password')).subscribe(data => {
    this.data.push(data);

Et pour afficher dans mon .html, j'ai ça :

<img src="{{ data[0].avatar}}"

Ca fonctionne bien, mais ça m'affiche une erreur dans la console :

TypeError: undefined is not an object (evaluating 'ctx.data[0].avatar')

Du coup, comment suis je censer appeler la variable dans le HTML si c'est pas comme ça ? ( Même si ça fonctionne )

Bonjour, est-ce que tu peux nous montrer le fichier:

component.ts et le fichier component.html complet.

Est-ce que data est définit dans le constructeur où bien dans la méthode ngOnInit ?

Si data est pas définit lorsque le composant est monté ta vue essai d'utiliser une donnée qui est undefined.

Dans ce cas il faudra peut-être utiliser la directive *NgIf de angular avec un truc du genre:

<div *ngIf="!!data">

  <img src="{{ data[0].avatar}}" />

</div>

-
Edité par SamuelGaborieau3 9 mai 2022 à 11:26:32

Salut, comme dit précédemment t'as un problème asynchrone 

Tu lui passe ton index 0 avant que ton composant ait reçu le tableau data, il va le recevoir par la suite et te l'afficher d'ou le fait que tu vois l'image et l'erreur en console

Normalement tu itères sur ton tableau coté html au travers de la directive "ngFor". Avec ça, Angular crée ton élément dès que le tableau aura une taille (donc data !== undefined), Les objets ne seront pas vides et t'auras pas d'erreur

Les index dans le html c'est pas bon, faut éviter même pour les tests :/

++