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

Bonjour,

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

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";

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.

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

Oui, soit tu initialise la variable lors de la déclaration, soit tu le fais dans constructor.

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 !

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

Faudra toujours présenter une sorte d'instanciation pour la variable input avec sont type, comme ceci  et ne pas utiliser undefinied:

-
Edité par CharhabilSanaa 27 mai 2022 à 13:38:46

Vu que le sujet a été déterré, je me permets d'ajouter des précisions :

Ce fonctionnement n'est pas intimement lié à Angular, mais plutôt à TypeScript. En changeant votre tsconfig vous pouvez désactiver ce mécanisme d'initialisation strict de propriété.

Sinon, vous avez aussi des possibilités syntaxiques dans le code pour traiter ce cas sans l'initialiser dans le composant :

@Input() maVariable?: string; // ma variable sera de type string | undefined, lorsque je l'utilise je devrai vérifier qu'elle est définie

@Input() maVariable!: string; // je sais que je ne l'ai pas initialisée ici, mais je sais que je l'ai fait autrement donc ne râle pas. Ma variable sera de type string.

@tarekb131 Bonjour,  merci de ne pas squatter le sujet des autres, créer votre propre sujet dans le respect des règles du forum à savoir qu'un message commence par des règles de politesses (Un bonjour ou des salutations à la communauté et se termine par des remerciements par avances pour les futures réponses), la description de votre problème et le code que vous avez écrit inséré sur le forum à l'aide de l'outil d'intégration de code soit le bouton code </>.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.