无法绑定到"ngModel"，因为它在 Angular 2 中的双向数据绑定期间不是"input"的已知属性

Question

我在Angular 2中相对较新。

我试图以这样的形式使用两种方式绑定 -

模型像这样 -

export interface Profile
{
    id: number;
    name: string;
    dob: string;
};

模板喜欢 -

<form action="profile">
    <div class="modal-body">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" placeholder="Enter Name"    ngDefaultControl [(ngModel)]="profileToAdd.name">
        </div>
        <div class="form-group">
            <label for="dob">Date Of birth:</label>
            <input type="date" class="form-control" placeholder="Date of Birth" ngDefaultControl [(ngModel)]="profileToAdd.dob">
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" type="reset"                    >Reset</button>
        <button class="btn btn-info"    (click)="addProfileSubmit($event)" >Add Profile</button>
    </div>
</form>

和 component 喜欢 -

'use strict';
import { Component } from '@angular/core';
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
import { Profile } from '../../dataModel/Profile.ts';   //Data Model
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
@NgModule({
    imports: [
        FormsModule
    ],
    declarations: [
        ProfileListComponent
    ]
})
@Component({
    selector: 'profile-list',
    template: require('./profileList.component.html'),
    styles: [require('./profileList.component.css')]
})
export class ProfileListComponent
{
    private profileToAdd: Profile;         //Current Profile to add from pop up
    ..........
    ..........
    public addProfileSubmit(event): void
    {
        console.log(this.profileToAdd);
        ..........
        ..........
    }
}

我遇到这样的错误 -

An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" placeholder="Enter Name" ngDefaultControl [ERROR ->][(ngModel)]="profileToAdd.name">
</div>
<div class="form-gr"): t@52:109
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="date" class="form-control" placeholder="Date of Birth" ngDefaultControl [ERROR ->][(ngModel)]="profileToAdd.dob">
</div>
</div>
"): t@56:109
at TemplateParser.parse (D:[e-mail]:8530:21)
at RuntimeCompiler._compileTemplate (D:[e-mail]:16905:53)
at D:[e-mail]:16828:85
at Set.forEach (native)
at compile (D:[e-mail]:16828:49)
at ZoneDelegate.invoke (D:ProfileManagementProfileManagementnode_moduleszone.jsdistzone-node.js:232:26)
at Zone.run (D:ProfileManagementProfileManagementnode_moduleszone.jsdistzone-node.js:114:43)
at D:ProfileManagementProfileManagementnode_moduleszone.jsdistzone-node.js:502:57
at ZoneDelegate.invokeTask (D:ProfileManagementProfileManagementnode_moduleszone.jsdistzone-node.js:265:35)
at Zone.runTask (D:ProfileManagementProfileManagementnode_moduleszone.jsdistzone-node.js:154:47)

re-

我当前的代码在此处上传 -

https://github.com/abrarjahin/dot.netcore_angular2_app/tree/master/profilemanagement/clientapp/clientapp/app/components/profile-list

---

有人可以帮我吗？

事先感谢您的帮助。

Answer 1

您缺少在模块中导入的FormsModule：

import { FormsModule } from '@angular/forms';
@NgModule({
    imports: [
        ...
        FormsModule,
        ...
    ],
    declarations: [
        ...
        ProfileListComponent,
        ...
    ]
})

NgModel指令是FormsModule的一部分，因此需要导入它。您可以在此处阅读有关NgModel指令的更多信息。

Answer 2

我相信您的问题是您不是"新来"界面的新实例。并将新配置文件的值设置为接口的新实例。我也不熟悉接口，我将其更改为 export class。

  @Component({
  selector: 'my-app',
  template: `
    <div>
      <input [(ngModel)]="id" />
      <button (click)="add()">add</button>
      <h1>{{newProfile.id}}</h1> 

    </div>
  `,
})
export class App {
  id: number;
  public newProfile : Profile = new Profile();
  constructor() {
  }
  add(){
    this.newProfile.id = this.id;
    console.log(this.newProfile.id);
  }
}

这是导入的型号

export class Profile
{
    id: number;
    name: string;
    dob: string;
     constructor() {
    }
};

这是一个工作的plunker https://plnkr.co/edit/d9uo9pzx2njjklhewxso?p=preview