Modifier le nom du héros
Les utilisateurs devraient pouvoir modifier le nom du héros dans une zone de texte du type ‹input› .
La zone de texte doit à la fois afficher la propriété "name" du héros et mettre à jour cette propriété à mesure que l'utilisateur le tape.
Cela signifie que le flux de données de la classe du composant doit ce faire, de l'écran à la classe et de la classe à l'écran.
Pour automatiser ce flux de données, configurez une liaison de données bidirectionnelle entre l'‹input› élément
du formulaire et la hero.namepropriété.
Liaison à double sens (bidirectionnelle)
Refactoriser la zone de détails dans le HeroesComponent modèle pour qu'il ressemble à ceci :
src/app/heroes/heroes.component.html (modèle de HeroesComponent)
[(ngModel)] est la syntaxe de liaison de données bidirectionnelle d'Angular.
Ici, il lie la propriété hero.name à la zone de texte HTML afin que les données puissent circuler dans les deux sens :
de hero.name propriété à la zone de texte, et de la zone de texte à hero.name.
Le FormsModule manquant
Notez que l'application a cessé de fonctionner lorsque vous avez ajouté [(ngModel)].
Pour voir l'erreur, ouvrez les outils de développement du navigateur et recherchez dans la console un message tel que
Bien qu'il ngModel est une directive angulaire valide, elle n'est pas disponible par défaut.
Il appartient à FormsModule et vous devez choisir de l'utiliser.