编辑由 Angular 4 - 角度/CLI 安装的第一个应用程序时出现未捕获错误

Question

我第一次安装了 angular/cli，我只是编辑文件中app.component.ts名称变量并更改 HTML 文件，如下所示。

app.component.html：

<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>

app.component.ts：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'text';
}

收到此错误：

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("][(ngModel)]="name">
{{ name }}
"): ng:///AppModule/AppComponent.html@0:19
at syntaxError (http://localhost:4200/vendor.bundle.js:17734:34)
at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:28854:19)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:43006:39)
at http://localhost:4200/vendor.bundle.js:42926:62
at Set.forEach (native)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:42926:19)
at http://localhost:4200/vendor.bundle.js:42813:19
at Object.then (http://localhost:4200/vendor.bundle.js:17723:143)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:42812:26)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:42741:37)
syntaxError @ compiler.es5.js:1690
webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse @ compiler.es5.js:12810
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate @ compiler.es5.js:26962
(anonymous) @ compiler.es5.js:26882
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents @ compiler.es5.js:26882
(anonymous) @ compiler.es5.js:26769
then @ compiler.es5.js:1679
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap e8021dabea79ba711a21:54
0 @ main.ts:11
__webpack_require__ @ bootstrap e8021dabea79ba711a21:54
webpackJsonpCallback @ bootstrap e8021dabea79ba711a21:25
(anonymous) @ main.bundle.js:1

已经安装了最新版本的Node，npm和Angular/CLI

Answer 1

请检查您是否在app.module.ts文件中导入了FormsModule。 如果没有，请添加以下代码

import { FormsModule} from '@angular/forms';
imports: [
FormsModule ],

Answer 2

将此添加到您的应用程序模块：

imports: [FormsModule]

你需要它来使用ngModel