Question

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

Angular CLI：7.0.6
节点：10.7.0
角度：7.0.4，

VS Code不会引发任何错误，但是当我向HTML添加[（ngModel）] =“ inputText”时，浏览器控制台会显示错误：

错误：模板解析错误：

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

syntaxError

./ node_modules/@angular/compiler/fesm5/compiler.js/TemplateParser.prototype.parse编译器.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选择器用来激活它。

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

1 个答案: