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

2020/09/16 15:32 · javascript ·  · 0评论

即使未显示组件,启动我的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";
}

是的就是这样,在app.module.ts中,我刚刚添加了:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

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

对于使用[(ngModel)]角245+,你需要进口FormsModule从角形态...

也正是在下形成这个路径角回购github上

角/包/形式/ src /指令/ ng_model.ts

也许这不是一个非常高兴的AngularJs开发者,你可以使用NG-模型之前的任何时间无处不在,但作为角试图单独的模块来使用任何你想你想的时候使用,ngModelFormsModule现在。

另外,如果您使用的是ReactiveFormsModule,也需要将其导入。

因此,只需查找app.module.ts并确保已FormsModule导入...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

这也是FormsModule ngModelAngular4的当前开始注释

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

如果你想使用你的输入,而不是一种形式,你可以用它ngModelOptions做出独立真实 ...

[ngModelOptions]="{standalone: true}"

欲了解更多信息,请看ng_model在角部分在这里

您需要导入FormsModule

打开app.module.ts

并添加行

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

@NgModule({
imports: [
   FormsModule
],
})

扔进去可能会帮助某人。

假设你已经创建了一个新的NgModule,说AuthModule专门处理您的验证需求,确保进口FormsModule在AuthModule

如果要在中使用“ FormsModule仅”,AuthModule则无需导入FormModule默认INAppModule

所以在这样的事情AuthModule

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

AppModule如果您不使用FormsModule其他地方,那就忘了导入

简单的解决方案: 在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 { }

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

在此处输入图片说明

要消除此错误,您需要执行两个步骤

  1. 在您的应用程序模块中导入FormsModule
  2. 将其作为@NgModule装饰器中的导入值传递

基本上app.module.ts应该如下所示:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

希望能帮助到你

我正在使用Angular 7

我必须导入ReactiveFormsModule,因为我正在使用FormBuilder类创建反应形式。

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})

您需要导入FormsModule您在模块如果此组件是根,即app.module.ts

请打开app.module.ts

@ angular / forms导入FormsModule

例如:

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

@NgModule({
imports: [
   FormsModule
],
})

在您的应用模块中导入FormsModule

它会让您的应用程序运行良好。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

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

如果你需要使用[(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>

ngModel是FormsModule的一部分。并且应该从@ angular / forms导入以与ngModel一起使用。

请按如下所示更改app.module.ts:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

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

我正在使用Angular 5。

就我而言,我也需要导入RactiveFormsModule。

app.module.ts(或anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

我知道这个问题是关于Angular 2的,但我使用的是Angular 4,但这些答案都没有帮助。

在Angular 4中,语法必须为

[(ngModel)]

希望这可以帮助。

有时即使我们已经导入了BrowserModuleFormsModule而其他相关模块仍然出现相同的错误。

然后我意识到我们需要将它们导入Order中,在这里我错过了。所以顺序应该是这样 BrowserModuleFormsModuleReactiveFormsModule

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

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

希望这可以帮助某人.. :)

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

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

在您愿意使用ngModel的模块中,您必须导入FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

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

  1. 您没有将FormsModule导入到声明了组件的模块(使用ngModel的组件)的import数组中。
  2. 您已将FormsModule导入一个模块,该模块是另一模块的继承。在这种情况下,您有两种选择:

    • 让FormsModule从两个模块(模块1和模块2)导入到导入数组中。通常,导入模块不提供对其导入模块的访问。(导入不会被继承)

在此处输入图片说明

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

在此处输入图片说明

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

    在此处输入图片说明

ngModule您需要导入的时候FormsModule,因为ngModel是来自FormsModule请修改您的app.module.ts,就像下面我分享的代码

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

导入FormModule一个app.module

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

您需要导入FormsModule

打开app.module.ts

并添加行

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

@NgModule({
imports: [
   FormsModule
],
})

ngModel应该从@ angular / forms导入,因为它是FormsModule的一部分。因此,我建议您以如下方式更改app.module.ts:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

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

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

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

对于我的场景,我必须将[CommonModule]和[FormsModule]都导入到我的模块中

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

这适用于使用普通JavaScript而不是Type Script的人们。除了引用页面顶部的表单脚本文件外,如下所示

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

您还应该告诉模块加载器加载ng.forms.FormsModule进行更改后importsNgModule方法的属性如下所示

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

祝您编码愉快!

我从RC1升级到RC5,并收到此错误。

我完成了迁移(基于Angular2快速入门示例app.module.ts引入了一个新文件,更改package.json为包括新版本和缺少的模块,最后更改main.ts为相应地启动)。

我先做了一次npm update,然后再一次npm outdated确认安装的版本正确,但是仍然没有运气。

我最终完全清除了该node_modules文件夹并重新安装npm install-Voila!问题解决了。

当我第一次学习本教程时,main.ts看起来与现在略有不同。它看起来非常相似,但是请注意区别(最上面的是正确的)。

正确:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

旧教程代码:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
本文地址:http://javascript.askforanswer.com/wufabangdingdao-ngmodelyinweitabushi-inputdeyizhishuxing.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!