Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Angular] problème d'initialisation d'un Input

Cours Angular

Sujet résolu
    4 septembre 2021 à 15:59:47

    Bonjour à tous,

    je suis en train de suivre le cours d'Angular et je suis confronté à un léger soucis.

    Comme indiqué dans le cours (et après avoir importé Input depuis angular/core), je fais ma déclaration de variable comme suit :

    @Input() appareilName: string;

    Hors, je me retrouve avec une belle erreur :

    Property 'appareilName' has no initializer and is not definitely assigned in the constructor.


    De toute évidence, il ne supporte pas que l'initialisation se fasse côté HTML via la propriété liée au décorateur déclaré précédemment.
    Je suis obligé de l'initialiser moi même avec une valeur random :

    @Input() appareilName: string = "trololo";

    Là aucun soucis, il est content et surcharge la variable avec la propriété. Seulement je ne comprends pas pourquoi, et surtout pourquoi je fais exactement ce qui est marqué dans le cours, que ça marche pour le prof et pas pour moi...
    Un changement côté Angular et un cours pas à jour ? Moi qui suis complètement passé à côté d'un truc ?
    Malgré mes recherches, impossible de trouver la solution.
    J'avoue qu'un petit avis extérieur me serait bien agréable pour savoir ce que je fais mal ! :)

    -
    Edité par SundayIG 4 septembre 2021 à 16:29:33

    • Partager sur Facebook
    • Partager sur Twitter
      4 septembre 2021 à 18:41:58

      Bonjour,

      C'est parce que undefined ce n'est pas une string.

      • Partager sur Facebook
      • Partager sur Twitter
        4 septembre 2021 à 18:53:28

        Merci piero5673 pour ta réponse.
        Par contre je dois être particulièrement fatigué de ma journée, mais je ne comprend pas celle-ci.

        C'est appareilName qui est un string.

        Voici le contenu de "appareil.components.ts" :

        import { Component, Input, OnInit } from '@angular/core';
        
        @Component({
          selector: 'app-appareil',
          templateUrl: './appareil.component.html',
          styleUrls: ['./appareil.component.scss']
        })
        export class AppareilComponent implements OnInit {
        
          @Input() appareilName: string;
          appareilStatus: string = "éteint";
        
          constructor() { }
        
          ngOnInit(): void {
          }
        
          getStatus(){
            return this.appareilStatus;
          }
        
        }
        

        J'ai scrupuleusement vérifié, c'est à la lettre près le code qui est donné dans le cours.
        Et pourtant, contrairement au cours dans lequel la déclaration du décorateur ne pose aucun soucis en étant instancié sans valeur, de mon côté NodeJs ne l'accepte pas et je me retrouve obligé de l'instancier avec une valeur random pour éviter l'erreur :

        @Input() appareilName: string = "valeurAuPif";
        • Partager sur Facebook
        • Partager sur Twitter
          4 septembre 2021 à 22:45:23

          Alors je n'ai pas le cours sous les yeux, c'est peut-être lié à une maj qu'il y a eu entre temps ou c'est une faute, mais je t'assure que quand le composant est créé, il y a bien un input "appareilName" qui doit être une string mais qui est undefined. Du coup typescript râle un bon coup parce que undefined n'est pas une string.
          • Partager sur Facebook
          • Partager sur Twitter
            4 septembre 2021 à 22:49:37

            Ok. Donc pour toi, et si je comprend bien, c'est un comportement tout à fait normal.
            Lorsqu'on déclare un décorateur on est obligé de l'initialiser avec une valeur par défaut ?
            Je préfère être bien sûr. Car si c'est le cas, ça veut en effet dire qu'il y a un gros soucis de mise à jour avec le cours Angular. Car avec exactement le même code de son côté ça passe sans le moindre soucis :/
            • Partager sur Facebook
            • Partager sur Twitter
              5 septembre 2021 à 11:15:05

              Oui, soit tu initialise la variable lors de la déclaration, soit tu le fais dans constructor.
              • Partager sur Facebook
              • Partager sur Twitter
                5 septembre 2021 à 11:27:50

                Ok super, merci ! :)
                Décidément... beaucoup de problèmes avec pas mal de points de ce cours qui n'est pas à jour :(

                J'ai vérifié dans la doc officielle et ils disent de déclarer avec une chaîne de caractère vide :

                @Input() appareilName: string = '';

                La déclaration qu'on voit dans le cours n'est apparemment plus celle qui convient de faire aujourd'hui.
                Si des personnes qui suivent ce cours passent sur le forum, avec un peu de chance ils verront ce sujet !

                • Partager sur Facebook
                • Partager sur Twitter
                  6 septembre 2021 à 2:21:06 - Message modéré pour le motif suivant : Message complètement hors sujet


                    16 septembre 2021 à 18:54:51

                    Oui je confirme, le cours n'est plus du tout à jour.

                    De ce que j'ai compris, une mise à jour d'Angular fait qu'il est impossible de déclarer des variables vides, il faut donc mettre une chaîne vide pour les string.
                    Pour des number, perso, je mets -1.

                    Mais c'est pareil pour certains objets, par la suite tu auras également le problème.
                    Par exemple pour les FormGroup, note pour plus tard, l'initialisation de ton formulaire se fera ainsi :

                    userForm: FormGroup = this.formBuilder.group({});



                    Par la suite, tu as aussi rxjs qui s'utilise différemment. Les modules s'importent individuellement :

                    import { interval, Subject } from 'rxjs';



                    -
                    Edité par Itopi 16 septembre 2021 à 19:20:08

                    • Partager sur Facebook
                    • Partager sur Twitter

                    [Angular] problème d'initialisation d'un Input

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