这似乎是一个流行的问题,但解决方案都建议导入FormsModule,这是正在做的。
<label for="city">City</label>
<input type="text" id="city" [ERROR ->][(ngModel)]="chosenCity">
<input type="button" value="Get Weather" (click)="getWeather(chosenCity)" "):
js prettyprint-override">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.share.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' }
])
]
};
完整代码为: app.module为: 怎么了,为什么对我不起作用?
我正在尝试测试控件的angular2双向绑定。以下是错误: app.component.html app.component.ts app.component.spec.ts
下面是项目类 我弄不清我做错了什么
我正在使用Angular 6并试图呈现一个页面,我得到以下错误不能绑定到'ng模型',因为它不是'input'的已知属性。我已经尝试了堆栈溢出中的所有选项。 以下是选择 app.module.ts 我使用的是Visual Studio代码,当我点击一个特定的链接时,我得到了错误。请指导我。提前谢谢。
编辑:更新的Plunkr:http://plnkr.co/edit/fq7p9kpjmxb5nahccyiq?p=preview 这部分工作: 和data.json
我试图在Angular 2中实现动态表单。我在动态表单中添加了删除和取消等附加功能。我遵循了以下文档:https://angular.io/docs/ts/latest/cookbook/dynamic-form.html 我对代码做了一些修改。我在这里搞错了。 我如何使这个错误消失? 您可以在这里找到完整的代码:http://plnkr.co/edit/sl949g1hqqrnrur1xxqt?