角2組件與ngModel不工作

-3

蔭新的角2，發佈之前，我試圖尋找在互聯網上一個解決方案，但我不能讓solution.i應該心存感激，如果有人可以幫助我角2組件與ngModel不工作

我的代碼下面的工作沒有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爲2路在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> 
`,

}）

來源

2017-02-05 k.kingalu

你有什麼錯誤訊息？你有沒有試過這個： http://stackoverflow.com/questions/38365761/angular2-use-ngmodel-with-ngmodeloptions-standalone-true-to-link-to-a？ – Nikolai

我建議你看一看開發工具，在這種情況下，你會得到一個非常解釋性的錯誤，實際上告訴你到底哪裏出錯：

所以這是可以解決的有兩種方式。添加name屬性：

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

或添加standalone:true：

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

Plunker

來源

2017-02-06 08:50:41 Alex

非常感謝它通過添加名稱屬性:) –

不客氣！很高興我能幫上忙！ :) – Alex

我想你在emplate解析錯誤，因爲您的UsersComponent中沒有username變量。

希望這會有所幫助。

來源

2017-02-05 21:57:41 hakany

我試過了，但仍然不起作用 –

「不起作用」幾乎沒有幫助。什麼是確切的行爲？你有任何錯誤信息？ –

角2組件與ngModel不工作

回答

相關問題