Angular 角度5模板变量错误

我用的是角5？ 我研究了StackOverflow上的类似问题

我创建了一个名为contact-form.component.html的模块。在添加模板变量#firstName=“ngModel”之前，代码中的所有内容都正常，没有错误

名字
评论
提交

错误：

compiler.js:485 Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" (" class="form-group">
  <label for="firstName">First Name</label>
  <input ngModel  name="firstName" [ERROR ->]#firstName="ngModel" (change)="log()" id="firstName" type="text" class="form-control">
  </div>


This is my app.module.ts:

                    import { BrowserModule } from '@angular/platform-browser';
            import { NgModule } from '@angular/core';


            import { AppComponent } from './app.component';
            import { CoursesComponent } from './courses.component';
            import { CoursesService } from './courses.service';
            import { ContactFormComponent } from './contact-form/contact-form.component';


            @NgModule({
              declarations: [
                AppComponent,
                CoursesComponent,
                ContactFormComponent

              ],
              imports: [
                BrowserModule
              ],
              providers: [
                CoursesService
              ],
              bootstrap: [AppComponent]
            })
            export class AppModule { }

compiler.js:485未捕获错误：模板解析错误：
没有将“exportAs”设置为“ngModel”（“class=”form group“>
名字
]#firstName=“ngModel”（更改）=“log（）”id=“firstName”type=“text”class=“form control”>
这是我的app.module.ts：
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从“./app.component”导入{AppComponent}；
从“./courses.component”导入{CoursesComponent}；
从“./courses.service”导入{courseService}；
从“./contact-form/contact-form.component”导入{ContactFormComponent}；
@NGD模块({
声明：[
应用组件，
课程组成，
ContactFormComponent
],
进口：[
浏览器模块
],
供应商：[
课程服务
],
引导：[AppComponent]
})
导出类AppModule{}

通常意味着您忘记了导入

在您的例子中，您使用的是

ngModel

。要使用ngModel，您需要像这样导入

FormsModule

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

@NgModule({
  // ...
  imports: [
    BrowserModule,
    FormsModule
  ],
  // ...

通常意味着您忘记了导入

在您的例子中，您使用的是

ngModel

。要使用ngModel，您需要像这样导入

FormsModule

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

@NgModule({
  // ...
  imports: [
    BrowserModule,
    FormsModule
  ],
  // ...

---

必须在AppModule.ts文件中导入FormsModule

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { AppComponent } from './app.component';
        import { CoursesComponent } from './courses.component';
        import { CoursesService } from './courses.service';
        import { ContactFormComponent } from './contact-form/contact-form.component';
        import { FormsModule } from '@angular/forms';


        @NgModule({
          declarations: [
            AppComponent,
            CoursesComponent,
            ContactFormComponent

          ],
          imports: [
            BrowserModule,
            FormsModule
          ],
          providers: [
            CoursesService
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

---

必须在AppModule.ts文件中导入FormsModule

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { AppComponent } from './app.component';
        import { CoursesComponent } from './courses.component';
        import { CoursesService } from './courses.service';
        import { ContactFormComponent } from './contact-form/contact-form.component';
        import { FormsModule } from '@angular/forms';


        @NgModule({
          declarations: [
            AppComponent,
            CoursesComponent,
            ContactFormComponent

          ],
          imports: [
            BrowserModule,
            FormsModule
          ],
          providers: [
            CoursesService
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

---

您应该将FormsModule导入模块您应该将FormsModule导入模块