Угловые 2 Компонента с ngModel не работает

Question

Иам нового в угловых 2, перед отправкой я пытался искать решение через Интернет, но я не смог получить solution.i будет благодарен, если кто-то поможет мне

моих кодов ниже работает без ngModel

user.component

import { Component } from '@angular/core'; 

@Component({ 
selector: 'user', 
template: `<h3>Welcome {{name}}</h3> 
<p>EMAIL: {{email}}</p> 
<div *ngIf="showHobbies"> 
<p>HOBBIES:</p> 
    <ul> 
     <li *ngFor="let hobby of hobbies"> 
     {{hobby}} 
     </li> 
    </ul> 
</div> 
`, 
}) 

export class UsersComponent { 

username:string; 
private name:string; 
private email:string; 
private hobbies:string[]; 
private showHobbies:boolean; 

constructor(){ 
    this.username=""; 
    this.showHobbies=false; 
    this.name="My name"; 
    this.email="My Email"; 
    this.hobbies=['swimming','watching movie','playing football']; 
} 

toggleHobbies(){ 
    if(this.showHobbies==true){ 
     this.showHobbies = false; 
    } 
    else { 
     this.showHobbies = true; 
    } 
} 

} 

app.module выглядеть

import { NgModule }  from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { UsersComponent } from './components/users.component'; 

@NgModule({ 
    imports:  [ BrowserModule,FormsModule], 
    declarations: [ AppComponent,UsersComponent], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

мой app.component взгляд, как этот

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<user></user>`, 
}) 

export class AppComponent { } 

Приведенный выше код остановки, чтобы работать, когда я добавлять форму с ngModule для 2way связывания в user.component

@Component({ 
    selector: 'user', 
    template: `<h3>Welcome {{name}}</h3> 
    <p>EMAIL: {{email}}</p> 
    <p>TEL: {{telephone}}</p> 
    <button (click)="toggleHobbies()">{{ showHobbies ? 'Hide hobbies' : 'Show hobbies'}}</button> 

    <div *ngIf="showHobbies"> 
    <p>HOBBIES:</p> 
     <ul> 
      <li *ngFor="let hobby of hobbies"> 
       {{hobby}} 
      </li> 
     </ul> 
    </div> 

, когда я добавлять форму ниже других кодов остановок к работам

<form> 
    <label>Name</label> <br/> 
    <input type="text" [(ngModel)]="username" /> 
    <p>Hello {{username}} </p> 
</form> 
`, 

})

Answer 1

Я предлагаю вам взглянуть на инструменты разработчика, в этом случае вы получите очень пояснительную ошибку, на самом деле сказать вам, где именно ошибка:

Так что это может быть решена двумя способами. Добавьте атрибут name:

<input type="text" name="username" [(ngModel)]="username" /> 

или добавить standalone:true:

<input type="text" [(ngModel)]="username" [ngModelOptions]="{standalone: true}" /> 

Plunker

Answer 2

Я думаю, что вы получите в emplate parse error, потому что у вас нет переменной username в вашем UserComponent.

Надеюсь, это поможет.