La liaison de données bidirectionnelle ne fonctionnait pas en mode angulaire 2

Question

Dans mon application angulaire 2, j'ai essayé de lier les données de vue à l'aide de ngmodel, mais cela n'a pas fonctionné comme prévu.

event.component.html

<div class="form-group"> 
    <label for="comment">About Us:</label> 
     <input type="text" name="aboutus" class="form-control" 
[(ngModel)]="home.aboutus" required placeholder="aboutus"/>{{home.aboutus}} 

</div> 

homemenu.ts

export class Home { 
    aboutus: string; 
    } 

eventcomponent.ts export class EventComponent { home:Home; } constructor() { }

Answer 1

est toujours une bonne idée d'initialiser les variables de classe dans le constructeur comme celui-ci

export class EventComponent { 
    home:Home = null; // or home:Home; 
    constructor() { 
     this.home = new Home() 
    } 
} 

Answer 2

Il doit être juste aboutus

<input type="text" name="aboutus" class="form-control" 
[(ngModel)]="aboutus" required placeholder="aboutus"/>{{aboutus}} 

Answer 3

Vous devez initialiser la maison dans component.ts événement:

export class EventComponent { 
     home:Home = new Home(); 
     constructor() { } 
    } 

Answer 4

Depuis home n'est pas initialisés c'est pourquoi home.aboutus est lie pas avec le modèle html.

Essayez ci-dessous le code

export class EventComponent { 
    home:Home; 

    constructor() { 
     this.home = new Home(); 
    } 

} 

Answer 5

lier la propriété d'instance de la maison au lieu et lier [(ngModel)] = "la maison. aboutus "crache la valeur saisie en utilisant l'interpolation de chaîne {{home.aboutus}}.

export class EventComponent{ 
     home: Home; 
     constructor() { 
     this.home = new Home(); 
     } 
}