0

我正在尝试学习 Angular 和 Angular-CLI。所以我用 Angular-CLI 创建了一个项目,从一开始它似乎运行得很好。现在为了测试,我将 app.component.html 文件更改为以下内容:

<h1>Input your name:</h1>
<input type="text" [(ngModel)]="name">
<p>Your input: {{ name }}</p>

和我的 app.component.ts 相应地:

...
export class AppComponent {
  name = '';
}

我收到错误:

未捕获的错误:模板解析错误:无法绑定到“ngModel”,因为它不是“输入”的已知属性。

此时由于某种原因,页面上没有呈现任何内容。我试图将 app.component.html 更改为:

<input type="text" ng-model="name">
...

现在页面正确呈现,我确实看到了输入框,但是当我键入时我没有看到双向绑定,我没有看到我的<p>元素中的输出。

为什么会发生,如何解决?

4

1 回答 1

1

你只需要导入FormsModule你的app.module.ts&你的问题就会得到解决。像这样的东西。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }
于 2017-09-16T08:45:25.467 回答