Angular 6 - “意外指令'NgModel'......请添加@NgModule注释”答案

【问题标题】：Angular 6 - "Unexpected directive 'NgModel'...Please add a @NgModule annotation"Angular 6 - “意外指令'NgModel'......请添加@NgModule注释”
【发布时间】：2018-05-17 16:20:24
【问题描述】：

我是 Angular 新手，使用 Angular 6。

我正在尝试通过组件/控制器从输入（数字类型）更新模型。但是，将 NgModel from 导入到主应用程序模块中，我收到以下错误消息：

Unexpected directive 'NgModel' imported by the module 'AppModule'. Please add a @NgModule annotation

提前感谢您的帮助！

App.Module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, NgModel } from '@angular/forms';
import { AppComponent } from './app.component';
import { CanvasDirective } from './canvas/canvas.directive';

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

app.component.html：

<div appCanvas class="canvas"  (emitConfig)="updateCanvasConfig($event)" [param]="canvasParam"></div>

<ul *ngIf="canvasConfig">
  <li><b>Static Configuration</b></li>
  <li><pre>{{canvasConfig | json}}</pre></li>
  <li><b>Changeable Parameters</b></li>
  <li><pre>{{canvasParam | json}}</pre></li>

  <li>
    <label>
      <div>Amount of points</div>
      <input type="number" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
    </label>
  </li>
  <li>
    <label>
      <div>Margin X</div>
      <input type="number" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
    </label>
  </li>
  <li>
    <label>
      <div>Margin Y</div>
      <input type="number" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
    </label>
  </li>
  <li>
      <label>
        <div>Stroke Width</div>
        <input type="number" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
      </label>
    </li>
</ul>

App.Component.ts：

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Param } from './models/param.model';
import { Config } from './models/config.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public canvasConfig: Config;
  public canvasParam: Param;
  public test: number;

  constructor() {
    this.canvasParam = {
      colors: {
        start: '#cc0045',
        end: '#0067cc'
      },
      points: 3,
      margin: {
        x: 0.2,
        y: 0.4
      },
      stroke: {
        width: 2
      },
      spread: 80,
      showGrid: true
    };
  }

  changePointCount(e){
    console.log(e.path[0].value);
    this.canvasParam.points = e.path[0].value;
  }

  public updateCanvasConfig(config): void {
    this.canvasConfig = config;
  }
}

【问题讨论】：

首先将 NgModel 从导入到 app,module.ts 中删除，另外，请运行“npm intall”并验证您的所有包都已正确安装。
谢谢，克里斯托弗。但是，绑定仍然不起作用。

标签： angular typescript

【解决方案1】：

NgModle 不是一个模块。应该是：

imports: [
  FormsModule
]

你已经拥有了。您的组件中也不需要 FormsModule，因为它已经注入到应用程序组件中，因此可以在任何地方使用。

【讨论】：

这修复了损坏的绑定？
是的。使 ngModel 工作唯一需要的是 1-FormsModule 在您的导入中，2- 字段上的名称属性，以及 3 绑定：我不知道你是否需要它，但我也会添加 CommonModule，因为这对于你将需要的大多数东西都是必不可少的
抱歉，大卫，我刚刚看到你的最后回复。
David，name 属性是否必须与要更新的键匹配？
不，它不必匹配。它只需要一个。

【解决方案2】：

除了上述答案之外，在 App.module.ts 的 Imports 语句中更改以下行

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

到

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

【讨论】：