Angular 5 - Невозможно связать с 'ngModule', так как это не известное свойство 'input' - PullRequest
0 голосов
/ 18 ноября 2018

Я слежу за онлайн-руководством по Angular 5, используя код Visual Studio с современной угловой версией:

  • Angular CLI: 7.0.6

  • Узел: 10.7.0

  • Угловой: 7.0.4,

VS Код не выбрасываетсяошибка, но консоль браузера отображает ошибку, когда я добавляю [(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

syntaxError

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

Читая другие сообщения на наличие похожих ошибок, они в основном указывают на то, что либо импорт "{FormsModule}" и "import: [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 { }

Мои вопросы:

  • Где ошибка?

  • Что я могу сделать, чтобы устранить эту ошибку?

1 Ответ

0 голосов
/ 29 января 2019

Я думаю, вам следует заменить [(ngModule)] на [(ngModel)].

Нет встроенной директивы Angular, которая называется ngModule.

ngModule:

Угловой встроенный блок, который используется для совместного объявления некоторых компонентов, директив, служб и т. Д. И используется декоратором @NgModule({}).

ngModel:

Встроенная угловая директива, которая используется для связывания данных между компонентом и HTML и используется селектором ngModel для его активации.

...