Angular 4“无法绑定到’ngModel’,因为它不是’input’的已知属

参见英文答案 > Angular 2+ and Observables: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘select’????????????????????????????????????6个
这似乎是一个流行的问题,但解决方案都建议导入FormsModule,而这正在完成.

错误是：

无法绑定到’ngModel’,因为它不是’input’的已知属性. (”

<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解决问题.

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 ],imports: [
        FormsModule,ReactiveFormsModule
        RouterModule.forRoot([
            { path: '',redirectTo: 'home' }
        ])
    ]
};