无法绑定到“ngModel”，因为它不是“input”。ng 的已知属性

问题描述

当在 Angular 应用程序中使用 ngModel 绑定时，有时会遇到以下错误：

Can't bind to 'ngModel' since it isn't a known property of 'element'.

这是因为 ngModel 并非“input”元素的默认属性。因此，当使用 ngModel 指令时，需要事先为组件或指令声明该属性。

解决方案

1. 导入 FormsModule

要使用 ngModel 指令，需要在模块中导入 FormsModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入 FormsModule

@NgModule({
  imports: [BrowserModule, FormsModule], // 添加 FormsModule
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 声明组件的 ngModel

当在组件中使用 ngModel 指令时，需要通过添加 @Input() 装饰器来为组件声明该属性。

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

@Component({
  selector: 'app-my-component',
  template: `
    <ng-container *ngIf="visible">
      <input [(ngModel)]="model" />
    </ng-container>
  `
})
export class MyComponent {
  @Input() model: any;
  visible = true;
}

在这个例子中，我们为 MyComponent 组件声明了名为 model 的 ngModel 属性。

3. 声明指令的 ngModel

如果在自定义指令中使用 ngModel 指令，则需要通过添加 @Directive() 装饰器来声明该属性。

import { Directive, Input } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: '[appMyDirective][ngModel]',
  providers: [NgModel]
})
export class MyDirective {
  @Input() ngModel: any;
}

在这个例子中，我们为 MyDirective 指令声明了名为 ngModel 的属性。

结论

当在 Angular 应用程序中使用 ngModel 指令时，请记住以下几点：

• ngModel 不是“input”元素的默认属性，因此需要明确声明它。
• 要使用 ngModel 指令，需要导入 FormsModule。
• 通过 @Input() 装饰器为组件或指令声明 ngModel 属性。
• 若要在指令中使用 ngModel 指令，请通过添加 NgModel 提供程序来声明它。