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

JavaScript

HarryNear

2020-03-09

即使未显示组件,启动我的Angular应用程序时也会出现以下错误。

我必须将注释掉,<input>这样我的应用才能正常工作。

    zone.js:461 Unhandled Promise rejection: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <div>
            <label>Created:</label>
            <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
        </div>
    </div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

我正在查看Hero插件,但与我的代码没有任何区别。

这是组件文件:

    import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
    import { Intervention } from '../../model/intervention';

    @Component({
        selector: 'intervention-details',
        templateUrl: 'app/intervention/details/intervention.details.html',
        styleUrls: ['app/intervention/details/intervention.details.css']
    })

    export class InterventionDetails
    {
        @Input() intervention: Intervention;

        public test : string = "toto";
    }

第292篇《无法绑定到“ ngModel”,因为它不是“ input”的已知属性》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
Tony阿飞 2020.03.09

For any version from Angular 2, you need to import FormsModule in your app.module.ts file and it will fix the issue.

樱神无 2020.03.09

I upgraded from RC1 to RC5 and received this error.

I completed my migration (introducing a new app.module.ts file, changing package.json to include new versions and missing modules, and finally changing my main.ts to boot accordingly, based on the Angular2 quick start example).

I did an npm update and then an npm outdated to confirm the versions installed were correct, still no luck.

I ended up completely wiping the node_modules folder and reinstalling with npm install - Voila! Problem solved.

小宇宙泡芙 2020.03.09

This is for the folks who use plain JavaScript instead of Type Script. In addition to referencing the forms script file on top of the page like below

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

you should also tell the the module loader to load the ng.forms.FormsModule. After making the changes my imports property of NgModule method looked like below

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

Happy coding!

JinJin西门 2020.03.09

有时,当您尝试使用另一个模块中未共享的模块中的组件时,会出现此错误。

例如,您有2个模块,分别具有module1.componentA.component.ts和module2.componentC.component.ts,并尝试在module2内部的模板(例如<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">)中使用来自module1.componentA.component.ts的选择器,它将抛出即使在module1.componentA中有someInputVariableInModule1在module1.componentA.component.ts中不可用的错误@Input() someInputVariableInModule1

如果发生这种情况,您希望共享module1.componentA以在其他模块中进行访问。因此,如果您在sharedModule中共享module1.componentA,则module1.componentA将在其他模块中使用(在module1之外),并且每个导入sharedModule的模块都将能够在其模板中访问选择器,并注入@Input()声明的变量。

Tony西门古一 2020.03.09

ngModel来自FormsModule。在某些情况下,您会收到此类错误:

  1. 您没有将FormsModule导入到声明了组件的模块(使用ngModel的组件)的import数组中。
  2. 您已将FormsModule导入一个模块,该模块是另一模块的继承。在这种情况下,您有两个选择:
    • 让FormsModule从两个模块(模块1和模块2)导入到导入数组中。通常,导入模块不会提供对其导入模块的访问。(导入不会被继承)

在此处输入图片说明

  • 在Form1中将FormsModule声明为导入和导出数组,然后在model2中也可以看到它

在此处输入图片说明

  1. (在某些版本中,我遇到了这个问题)您已经正确导入了FormsModule,但是问题出在输入HTML标记上。您必须为输入添加名称标签属性,并且[(ngModel)]中的对象绑定名称必须与名称属性中的名称相同

    在此处输入图片说明

JinJin西门神乐 2020.03.09

如果正确导入FormsModule后仍然出现错误,则请在终端或Windows控制台中检入,因为您的项目未编译(由于另一个错误,可能是任何错误),并且您的解决方案未反映在浏览器中!

就我而言,我的控制台出现以下不相关的错误:类型“ ApiService”上不存在属性“ retrieveGithubUser”。

神无LEYMandy 2020.03.09

我知道这个问题是关于Angular 2的,但我使用的是Angular 4,但这些答案都无济于事。

在Angular 4中,语法必须为

[(ngModel)]

希望这可以帮助。

JinJin凯梅 2020.03.09

如果在应用可接受的解决方案后仍然有人遇到错误,则可能是因为您要在输入标记中使用ngModel属性的组件具有单独的模块文件。在这种情况下,也应在组件的module.ts文件中应用可接受的解决方案。

Green达蒙 2020.03.09

如果你需要使用[(ngModel)]第一你需要导入FormsModuleapp.module.ts,然后在进口的列表中添加。像这样:

app.module.ts

  1. 进口 import {FormsModule} from "@angular/forms";
  2. 添加进口 imports: [ BrowserModule, FormsModule ],

app.component.ts

  1. 例: <input type="text" [(ngModel)]="name" >
  2. 接着 <h1>your name is: {{name}} </h1>
L木嘢 2020.03.09

在要使用[[ngModel)]的那些模块中导入FormsModule

在此处输入图片说明

逆天A前端 2020.03.09

简单的解决方案: 在app.module.ts中

例子1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

例子2

如果要使用[(ngModel)],则必须在app.module.ts中导入FormsModule

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }
Mandy小卤蛋凯 2020.03.09

为了能够对表单输入使用双向数据绑定,您需要将FormsModule导入Angular模块中。有关更多信息,请参见此处Angular 2官方教程表单的官方文档。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android