关于javascript：无法绑定到’ngModel’，因为它不是’input’的已知属性


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

我有我的the following error when发射角程序，即使if the component is not displayed。P＞＜／

i have to the so that我无可奉告了程序工厂。P＞＜／

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

我看着plunker the英雄，但我从没有看到任何差分队列。P＞＜／

here is the组件文件：P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    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中，我刚刚添加了：

1
2
3
4
5
6
7
8
9
10
11
import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
相关讨论

为了能够对表单输入使用双向数据绑定，您需要在您的Angular模块中导入docx1〔0〕包。有关更多信息，请参阅此处的Angular 2官方教程和表单的官方文档。

相关讨论

对于在Angular2、4和5+中使用[(ngModel)]，需要从AngularForm导入表单模块…

此外，在Github的角回购形式下，它也在这条路径中：

angular / packages / forms / src / directives / ng_model.ts

号

对于AngularJS开发人员来说，这可能不是一件很愉快的事情，因为您可以随时在任何地方使用NG模型，但是当Angular试图分离模块以使用您当时想要使用的任何东西时，NGModel现在已经形成了模块。

另外，如果您使用的是reactiveFormsModule，也需要导入它。

所以只需查找app.module.ts并确保您已将FormsModule导入…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 { }

此外，这是目前表单中Angular4 ngModel的起始注释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * {{myModel.valid}}
 * <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一起使用，并使其独立为真…

1
[ngModelOptions]="{standalone: true}"

更多信息，请查看角度部分的Ng_模型。

您需要导入表单模块

打开app.module.ts

并添加线条

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

和

1
2
3
4
5
@NgModule({
imports: [
   FormsModule
],
})

。

相关讨论

把这个扔进去可能会有帮助。

假设您已经创建了一个新的ngmodule，比如AuthModule专门处理您的身份验证需求，请确保在该身份验证模块中也导入FormsModule。

如果只在AuthModule中使用FormsModule，那么在默认的AppModule中不需要导入FormModule。

所以在AuthModule中是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 { }

。

如果你不在其他地方使用FormsModule，那就不要考虑在AppModule中导入。

相关讨论

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

  • 在应用程序模块中导入表单模块
  • 在@ngmodule decorator中将其作为导入值传递

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
        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 { }

    希望有帮助

    相关讨论

    在应用程序模块中导入表单模块。

    它将使您的应用程序运行良好。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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)]，您是否需要在app.module.ts中导入FormsModule，然后添加一个导入列表。像这样：

    应用模块.ts

  • 进口import {FormsModule} from"@angular/forms";
  • 外接程序导入埃多克斯1〔8〕

    • 应用组件.ts

  • 示例：
  • 然后是your name is: {{name}} 。

    • 我用的是角5。

    在我的例子中，我也需要导入实际表单模块。

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

    1
    2
    3
    4
    5
    6
    7
    8
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule
      ],
    相关讨论

    如果此组件位于根模块中，即app.module.ts，则需要在根模块中导入formsmodule。

    请打开app.module.ts

    从@angular/forms导入表单模块

    前任：

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

    和

    1
    2
    3
    4
    5
    @NgModule({
    imports: [
       FormsModule
    ],
    })

    。

    相关讨论

    我用角7

    我必须导入tractiveFormsModule，因为我正在使用FormBuilder类创建反应式窗体。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import {
    FormsModule,
    ReactiveFormsModule } from '@angular/forms';

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

    号

    Simple Soultion : In app.module.ts

    号

    1
    2
    3
    4
    5
    6
    7
    8
    ***Example 1***
    import {FormsModule} from"@angular/forms";  
    // add in imports

    imports: [
     BrowserModule,
     FormsModule
     ],

    。

    例2：

    If you want to use [(ngModel)] then you have to import FormsModule
    in app.module.ts

    号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import { FormsModule  } from"@angular/forms";    
    @NgModule({
      declarations: [
        AppComponent, videoComponent, tagDirective,
      ],
      imports: [
        BrowserModule,  FormsModule

      ],
      providers: [ApiServices],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    。

    相关讨论

    如果在应用接受的解决方案后仍有人出错，可能是因为您有一个单独的模块文件用于要在输入标记中使用ngmodel属性的组件。在这种情况下，也可以在组件的module.ts文件中应用接受的解决方案。

    我知道这个问题是关于角2的，但是我是关于角4的，这些答案都没有帮助。

    在角度4中，语法需要为

    1
    [(ngModel)]

    希望这有帮助。

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

    在我的例子中，我的控制台有以下不相关的错误：类型"apiservice"上不存在属性"retrievegithubuser"。

    在模块中，您要使用ngmodel，必须导入表单模块

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import { FormsModule } from '@angular/forms';

    @NgModule({
      imports: [
        FormsModule,
      ],

    })
    export class AbcModule { }

    。

    相关讨论

    NGModel来自FormsModule。在某些情况下，您可能会收到此类错误：

  • 您没有将FormsModule导入到声明组件的模块的导入数组中，该模块中使用了NGModel。
  • 您已经将FormsModule导入到一个继承自另一个模块的模块中。在这种情况下，您有两个选项：
    • 让FormsModule从模块1和模块2导入到导入数组中。按规则：导入模块不提供对其导入模块的访问权限。(导入不继承)

    • enter image description here。

    • 将FormsModule声明为模块1中的导入和导出数组的缩写形式，以便在模型2中看到它。

    氧化镁

  • (在某些版本中，我遇到了这个问题)您已经正确导入了表单模块，但问题出在input html标记上。必须为输入添加name tag属性，且[(ngmodel)]中的对象绑定名称必须与name属性中的名称相同。

    氧化镁

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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 {}

    。

    对于我的场景，我必须将[commonmodule]和[formsmodule]都导入到我的模块中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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而不是类型脚本的人准备的。除了引用页面顶部的表单脚本文件，如下所示

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

    。

    您还应该告诉模块加载程序加载ng.forms.FormsModule。修改后，我的NgModule方法的imports属性如下

    埃多克斯1〔22〕

    编码愉快！

    有时，当您尝试在不同的模块中使用不共享的模块中的组件时，会出现此错误。

    例如，您有两个具有module1.component a.component.ts和module2.componentc.component.ts的模块，并尝试在module2内的模板中使用module1.componenta.component.ts中的选择器(例如)，它将抛出错误，即module1.componenta.component.ts中的someinputvariableinmodule1不可用，甚至尽管在module1.componenta中有@Input() someInputVariableInModule1。

    如果发生这种情况，您希望共享module1.componenta以便在其他模块中访问。因此，如果在共享模块内共享module1.componenta，module1.componenta将在其他模块内可用(从module1外部)，并且每个导入共享模块的模块都将能够访问其模板中的选择器，从而注入@Input()声明的变量。

    相关讨论

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

    我完成了迁移(引入了一个新的app.module.ts文件，更改package.json以包含新的版本和缺少的模块，最后根据angular2快速启动示例将我的main.ts更改为相应的引导)。

    我做了一个npm update，然后做了一个npm outdated，以确认安装的版本是正确的，但仍然没有运气。

    最后，我彻底擦拭了node_modules文件夹，然后用npm install重新安装-喂！问题解决了。

    当我第一次做这个教程的时候，main.ts看起来和现在略有不同。它看起来很相似，但要注意区别(上面的一个是正确的)。

    对的：

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

    platformBrowserDynamic().bootstrapModule(AppModule);

    号

    旧教程代码：

    1
    2
    3
    import { bootstrap }    from '@angular/platform-browser-dynamic';
    import { AppComponent } from './app.component';
    bootstrap(AppComponent);

    您需要导入表单模块

    打开app.module.ts

    并添加线条

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

    和

    1
    2
    3
    4
    5
    @NgModule({
    imports: [
       FormsModule
    ],
    })

    。

    对于Angular2的任何版本，您需要在app.module.ts文件中导入FormsModule，它将解决此问题。