Partage
  • Partager sur Facebook
  • Partager sur Twitter

[ANGULAR] Afficher les données du backend

    8 mai 2022 à 17:58:08

    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 )



    • Partager sur Facebook
    • Partager sur Twitter
      9 mai 2022 à 11:26:07

      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

      • Partager sur Facebook
      • Partager sur Twitter

      suggestion de présentation.

        16 mai 2022 à 23:02:35

        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 :/

        ++

        • Partager sur Facebook
        • Partager sur Twitter

        [ANGULAR] Afficher les données du backend

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown