ngModel 在调用时留下空白屏幕

Question

我正在尝试学习 Angular2 的基础知识，所以我尝试进行一些测试。我已经下载了 typescript 和 angular/cli。

我可以使用迭代、属性绑定等，但是当我尝试使用 双向数据绑定 时（在 app.component.html 用于测试):

<input type="text" [(ngModel)]="test.description">

并且 ng server 刷新，我所做的所有事情都消失了，我看到的只是一个空白屏幕。

我要求答案简单一些，因为我是使用 angular 的初学者。

编辑： 即使在更新 app.modules.ts 之后，我的控制台仍然显示以下错误：

Uncaught Error: Template parse errors:
Can't bind to 'NgModel' since it isn't a known property of 'input'. ("
</p>

<input type="text" [ERROR ->][(NgModel)]="test.description" >`

Answer 1

您必须在控制台上收到错误，才能使用 ngModel，将其添加到您的模块中，

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [
         FormsModule      
]

使用正确的语法 ngModel

<input type="text" name="name" [(ngModel)]="test.description">

Answer 2

您需要在输入上放置一个 "name" 属性，以使其与 ngModel

一起使用

<input type="text" name="name" [(ngModel)]="test.description">

这是Plunker

Answer 3

我发现只需将 formsModule 添加到 app.module.ts 文件夹（或模块文件所在的任何位置）中的导入即可解决此问题。它只是试图在当前无法访问的库中实现一些东西。您还需要在文件顶部添加导入语句。

import { FormsModule} from '@angular/forms';



@NgModule(imports: [BrowserModule, FormsModule]})

这解决了我自己的 ngModule 不工作的问题。

ngModel 在调用时留下空白屏幕

ngModel leaves blank screen when called

typescript

angular2-ngmodel

angular