1

私は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>

このようなコンポーネント-

'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:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:8530:21)
at RuntimeCompiler._compileTemplate (D:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:16905:53)
at D:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:16828:85
at Set.forEach (native)
at compile (D:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:16828:49)
at ZoneDelegate.invoke (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:232:26)
at Zone.run (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:114:43)
at D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:502:57
at ZoneDelegate.invokeTask (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:265:35)
at Zone.runTask (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:154:47)

再

私の現在のコードはここにアップロードされています-

https://github.com/abrarjahin/Dot.NetCore_Angular2_App/tree/master/ProfileManagement/ClientApp/app/components/profile-list

誰でも私を助けてもらえますか？

助けてくれてありがとう。

4

2 に答える 2

3

FormsModuleモジュールにインポートがありません:

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

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

NgModelディレクティブは の一部でFormsModuleあるため、インポートする必要があります。NgModelディレクティブの詳細については、こちらをご覧ください。

于 2016-12-19T14:35:37.883 に答える
0

あなたの問題は、あなたのインターフェースの新しいインスタンスを「新しく」していないことだと思います。新しいプロファイルの値をインターフェイスの新しいインスタンスに設定します。また、インターフェースに慣れていないので、に変更しました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() {
    }
};

ここに作業プランカーがあります https://plnkr.co/edit/D9UO9Pzx2NjJKlheWxSO?p=preview

于 2016-12-19T16:45:41.510 に答える