角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

あなたのapp.module.shared.tsは次のようにする必要がありますあなたのapp.module.shared.ts

にFormsModule, ReactiveFormsModuleを追加する必要があります。

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' } 
     ]) 
    ] 
};