【问题标题】:Getting Error: Can't bind to 'ngModel' since it isn't a known property of 'input' despite importing FormsModule [duplicate]出现错误:无法绑定到“ngModel”,因为它不是“输入”的已知属性,尽管导入了 FormsModule [重复]
【发布时间】:2018-04-03 22:57:27
【问题描述】:

我在 app.module.ts 中导入了 FormsModule,但我仍然收到此错误。

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

我已经浏览过类似的帖子,但我仍然无法找到解决方案。

app.module.ts

 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
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'


})
export class AppComponent {
}

app.component.html

<input type=radio name="gender" value="Mr" [(ngModel)]="gender">Male
<input type=radio name="gender" value="Mrs" [(ngModel)]="gender">Female
{{"Hello " + gender}}

【问题讨论】:

  • 为什么appcomponent中有一个ngModule?
  • 您应该真正了解 Angular 应用程序的工作原理。最好的开始方法是理解这个例子:angular.io/tutorial

标签: angular angular2-forms angular2-directives


【解决方案1】:

试试这样:

app.module.ts

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: [
        FormsModule,
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    gender: string;
}

app.component.html

<input type=radio name="gender" value="Mr" [(ngModel)]="gender">Male
<input type=radio name="gender" value="Mrs" [(ngModel)]="gender">Female
{{"Hello " + gender}}

【讨论】:

  • 成功了。非常感谢:)
猜你喜欢
  • 2016-12-26
  • 1970-01-01
  • 1970-01-01
  • 2021-09-20
  • 2016-12-17
  • 1970-01-01
  • 2019-04-25
  • 2017-09-04
相关资源
最近更新 更多