Angular 4“无法绑定到'ngModel',因为它不是'input'的已知属性。”
这似乎是一个流行的问题,但所有的解决方案都建议导入FormsModule,并且正在完成。Angular 4“无法绑定到'ngModel',因为它不是'input'的已知属性。”
的错误是:
不能绑定到“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来解决。
你需要添加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' }
])
]
};
这很奏效,但我不确定我是否理解我的建议和你的建议之间的区别。无论如何,非常感谢您的帮助! –
@MartinHorton @MartinHorton使用延迟加载的方法并创建新模块,因此您需要在添加组件的位置导入该模块中的所有内容。谢谢 –
查看更多信息https://angular.io/guide/ngmodule#!#lazy-load –
我明确指出,常见的答案是导入FormsModule,但您可以在我提供的代码中看到它已导入。 –
尝试从ap.module中的@ angular/common导入CommonModule,并试一试。 –
@MartinHorton你必须在你的'input'标签中添加name属性 –