Angular 4「無法綁定到'ngModel'，因爲它不是'input'的已知屬性。」

Question

這似乎是一個流行的問題，但所有的解決方案都建議導入FormsModule，並且正在完成。

的錯誤是：

不能綁定到「ngModel」，因爲它不是「輸入」的已知屬性。 （」

<label for="city">City</label> 
<input type="text" id="city" [ERROR ->][(ngModel)]="chosenCity"> 
<input type="button" value="Get Weather" (click)="getWeather(chosenCity)" "): 

模板和分量代碼如下：

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

 
@Component({ 
 
    selector: 'weather', 
 
    templateUrl: './weather.component.html' 
 
}) 
 
export class WeatherComponent { 
 
    public weather: Weather; 
 

 
    constructor(private http: Http) { 
 
    } 
 

 
    public getWeather(chosenCity: string): void { 
 
     this.http.get('/api/weather/city/' + chosenCity).subscribe(result => { 
 
      this.weather = result.json(); 
 
     }); 
 
    } 
 
} 
 

 
interface Weather { 
 
    temp: string; 
 
    summary: string; 
 
    city: string; 
 
}

<h1>Weather check</h1> 
 

 
<label for="city">City</label> 
 
<input type="text" id="city" [(ngModel)]="chosenCity"> 
 
<input type="button" value="Get Weather" (click)="getWeather(chosenCity)" /> 
 

 

 
<div *ngIf="weather"> 
 
    <h3>Weather for {{weather.city}}</h3> 
 

 
    <table class="table table-bordered table-striped"> 
 
     <thead> 
 
      <tr> 
 
       <th>Temp</th> 
 
       <th>Summary</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>{{weather.temp}}</td> 
 
       <td>{{weather.summary}}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

的app.module.shared.ts如下：

import { NgModule } from '@angular/core'; 
 
import { RouterModule } from '@angular/router'; 
 

 
import { AppComponent } from './components/app/app.component' 
 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
 
import { HomeComponent } from './components/home/home.component'; 
 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
 
import { CounterComponent } from './components/counter/counter.component'; 
 
import { HelloWorldComponent } from './components/helloworld/helloworld.component'; 
 
import { WeatherComponent } from './components/weather/weather.component'; 
 

 
export const sharedConfig: NgModule = { 
 
    bootstrap: [ AppComponent ], 
 
    declarations: [ 
 
     AppComponent, 
 
     NavMenuComponent, 
 
     CounterComponent, 
 
     FetchDataComponent, 
 
     HomeComponent, 
 
     HelloWorldComponent, 
 
     WeatherComponent 
 
    ], 
 
    imports: [ 
 
     RouterModule.forRoot([ 
 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
 
      { path: 'home', component: HomeComponent }, 
 
      { path: 'counter', component: CounterComponent }, 
 
      { path: 'fetch-data', component: FetchDataComponent }, 
 
      { path: 'hello', component: HelloWorldComponent }, 
 
      { path: 'weather', component: WeatherComponent }, 
 
      { path: '**', redirectTo: 'home' } 
 
     ]) 
 
    ] 
 
};

而且app.module.client.ts文件如下：

import { NgModule } from '@angular/core'; 
 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
 
import { HttpModule } from '@angular/http'; 
 
import { sharedConfig } from './app.module.shared'; 
 
@NgModule({ 
 
    bootstrap: sharedConfig.bootstrap, 
 
    declarations: sharedConfig.declarations, 
 
    imports: [ 
 
     BrowserModule, 
 
     HttpModule, 
 
     FormsModule, 
 
     ReactiveFormsModule, 
 
     ...sharedConfig.imports 
 
    ], 
 
    providers: [ 
 
     { provide: 'ORIGIN_URL', useValue: location.origin } 
 
    ] 
 
}) 
 
export class AppModule { 
 
}

如果任何人都可以指出我什麼我做錯了，我會非常感激，但每一篇文章我發現表示問題可以通過導入FormsModule來解決。

Answer 1

你需要添加FormsModule, ReactiveFormsModule到您app.module.shared.ts

您app.module.shared.ts應該是這樣的。

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { CounterComponent } from './components/counter/counter.component'; 
import { HelloWorldComponent } from './components/helloworld/helloworld.component'; 
import { WeatherComponent } from './components/weather/weather.component'; 

export const sharedConfig: NgModule = { 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent, 
     HelloWorldComponent, 
     WeatherComponent 
    ], 
    imports: [ 
     FormsModule, 
     ReactiveFormsModule 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'fetch-data', component: FetchDataComponent }, 
      { path: 'hello', component: HelloWorldComponent }, 
      { path: 'weather', component: WeatherComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
};