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

已经安装了最新版本的节点，npm和angular / cli

Answer 1

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

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

Answer 2

将此添加到您的appmodule：

imports: [FormsModule]

你需要它来使用ngModel

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

2 个答案: