Angular ngModel的角度2组件不工作

我是Angular 2的新手，在发帖之前，我试图通过互联网搜索解决方案，但我找不到解决方案。如果有人能帮助我，我将不胜感激

我下面的代码在没有ngModel的情况下工作

用户组件

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

}

@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>

我的app.component看起来像这样

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 { }

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

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

export class AppComponent  { }

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：``，
})
导出类AppComponent{}

当我在user.component中添加带有ngModule的表单进行双向绑定时，上述代码停止工作

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

}

@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>

@组件({
选择器：“用户”，
模板：`欢迎{{name}}
电子邮件：{{EMAIL}

电话：{{电话}

{{Show嗜好？隐藏嗜好：'Show嗜好'}
爱好：



{{hobby}

当我在下面添加表格时，其他代码停止工作

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

名称

你好{{username}

`,

---

})

我认为您会遇到模板解析错误，因为您的UsersComponent中没有

username

变量

---

希望这有帮助

我建议您查看一下开发人员工具，在这种情况下，您将得到一个非常解释性的错误，以实际告诉您错误的确切位置：

所以这可以通过两种方式解决。添加

名称

属性：

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

---

您有什么错误消息？你试过这个吗？“不起作用”几乎是有用的。确切的行为是什么？您是否收到任何错误消息？