Angular 5 - 无法绑定到“ngModule”，因为它不是“输入”的已知属性

Question

我正在关注有关 Angular 5 的在线教程，使用带有最新 Angular 版本的 Visual Studio Code：

• Angular CLI：7.0.6

• 节点：10.7.0

• 角度：7.0.4，

VS Code 没有抛出任何错误，但是当我将 [(ngModel)]="inputText" 添加到我的 HTML 时，浏览器控制台会显示错误：

错误：模板解析错误：

Can't bind to 'ngModule' since it isn't a known property of 'input'. ("<input type="text" [ERROR ->][(ngModule)]="inputText" />

"): ng:///AppModule/HomeComponent.html@0:19

语法错误

./node_modules/@angular/compiler/fesm5/compiler.js/TemplateParser.prototype.parse compiler.js:2547

阅读其他类似错误的帖子，他们主要指出导入“{ FormsModule }”和“imports：[FormsModule]”丢失或“[（ngModule）] =”拼写错误。好像不是这样的。

感觉 app.module.ts 上的声明没有应用到 html 页面上，我不知道为什么。 我已经保存了所有页面，package.json 文件具有 @angular/forms 作为依赖项，并且任何更简单的代码都可以工作，包括单向数据绑定。

这是我的相关文件：

home.component.html

`<input type="text" [(ngModule)]="inputText" />`

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  inputText: string = "";

  constructor() { }

  ngOnInit() {
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的问题是：

• 哪里出错了？

• 如何解决此错误？

Answer 1

我认为您应该将[(ngModule)] 替换为[(ngModel)]。

没有名为 ngModule 的 Angular 内置指令。

ngModule：

Angular 内置块，用于一起声明一些组件、指令、服务等，并由装饰器 @NgModule({}) 使用。

ngModel：

Angular 内置指令用于在组件和 HTML 之间绑定数据，并被 ngModel 选择器用来激活它。