ngModel 2-way 数据绑定不适用于 Visual Studio 2017 Angular 2 单页应用程序模板

Question

我已经使用 Angular 单页应用程序 (SPA) 模板启动了一个 Visual Studio Community 2017 项目，如 .NET Web 开发和工具博客中所述：

https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

使用 [(ngModel)] 的双向数据绑定不起作用。

例如： 在 login.component.html 中：

<input [(ngModel)]="x" name="x"/>
<h1>{{x}}</h1>

在 login.component.ts 中：

export class LoginComponent {    
    x = 5;
}

结果：

当我更改输入框中的值时，h1 标记中的文本也应该更改。但它不会改变。

我已经尝试从 @angular/forms 导入 FormsModule 并将 FormsModule 添加到 app.module.ts 中 @NgModule 装饰器的导入中，如下所述：Angular 2 two way binding using ngModel is not working。

更多信息（2017-06-12 添加）： 请注意，应用程序模块分为三个单独的文件

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 { LoginComponent } from './components/login/login.component'; 
//dcowan: for login page
import { TimeEntryComponent } from 
'./components/timeentry/timeentry.component'; //dcowan: for time entry page

export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
    AppComponent,
    NavMenuComponent,
    CounterComponent,
    FetchDataComponent,
    HomeComponent,
    LoginComponent, //dcowan: for login page
    TimeEntryComponent //dcowan: for time entry page
],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'login', component: LoginComponent }, //dcowan: for login page
        { path: 'timeentry', component: TimeEntryComponent }, //dcowan: for time entry page
        { path: 'counter', component: CounterComponent },
        { path: 'fetch-data', component: FetchDataComponent },
        { path: '**', redirectTo: 'home' }
    ])
]

};

app.module.client.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//import { FormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';

// dcowan: Imports for loading & configuring the in-memory web api
//import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
//import { InMemoryDataService } from './in-memory-data.service';

import { DemoDbService } from './demo-db.service';


@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
    BrowserModule,
    //FormsModule,
    FormsModule,
    HttpModule,                
    ...sharedConfig.imports
],
providers: [DemoDbService,//dcowan: Dovico Web API
    { provide: 'ORIGIN_URL', useValue: location.origin }
] 
})
export class AppModule {
}

app.module.server.ts：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { sharedConfig } from './app.module.shared';
import { FormsModule } from '@angular/forms';

@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
    FormsModule,
    ServerModule,
    ...sharedConfig.imports
]
})
export class AppModule {
}

Answer 1

我也有同样的经历。暂时，我将 2 路绑定分解为属性和事件绑定。

<input [value]="x" (input)="x=$event.target.value">
<h1>{{x}}</h1>

Answer 2

我也有这个错误。尝试在 app.module.shared 中导入您的 FormsModule 而不是 app.module.server 和 app.module.client

Answer 3

我使用 (keyup) 和 [ngModel] 修复了这个问题

(keyup)="onKey($event)" 
[ngModel]="model.input" 

在 keyup 中我们更新 model.input

public onKey(event: any) {
       this.model.input = event.target.value;
}

Answer 4

如果在表单标记中使用ngModel，则必须设置名称属性或必须在ngModelOptions 中将表单控件定义为“独立”。

此代码带有属性名称：

<input name="nome" [(ngModel)]="nome" />

此代码没有属性名称：

<input [(ngModel)]="nome" [ngModelOptions]="{standalone: true}" />