Angular 4 表单 [(ngModel)] 错误

Question

我正在使用 angular 4 和 meanstack。当我键入 [(ngModel)] 时，我的表单显示错误。然后我尝试 "ngmodel" 然后表格工作正常。但数据未从后端定义。

错误如下。当我使用 [(ngModel)]

<form (submit)="savereportdata()" novalidate>

<fieldset>

    <div class="form-group">
        <label for="middleItemId">Item ID</label>
        <input type="text" class="form-control" placeholder="Enter Item ID" [(ngModel)]="itemid" name="itemid">
    </div>
    <div class="form-group">
        <label for="middleItemId">type</label>
        <input type="text" class="form-control" placeholder="Enter Item ID" [(ngModel)]="typeofdefect" name="typeofdefect">
    </div>

错误：

 VM3014 ReportComponent.ngfactory.js:7 ERROR TypeError: Cannot read property 'reportitemdata' of undefined
        at ReportComponent.webpackJsonp.../../../../../src/app/pages/requestreport/report/report.component.ts.ReportComponent.savereportdata (VM2980 main.bundle.js:983)
        at Object.eval [as handleEvent] (VM3014 ReportComponent.ngfactory.js:12)
        at handleEvent (VM2979 vendor.bundle.js:58441)
        at callWithDebugContext (VM2979 vendor.bundle.js:59905)
        at Object.debugHandleEvent [as handleEvent] (VM2979 vendor.bundle.js:59493)
        at dispatchEvent (VM2979 vendor.bundle.js:55034)
        at VM2979 vendor.bundle.js:55645
        at HTMLFormElement.<anonymous> (VM2979 vendor.bundle.js:64132)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (VM2976 polyfills.bundle.js:2970)
        at Object.onInvokeTask (VM2979 vendor.bundle.js:50300)

当我使用 ngmodel

<div class="form-group">
                <label for="middleItemId">Item ID</label>
                <input type="text" class="form-control" placeholder="Enter Item ID" [(ngModel)]="itemid" name="itemid">
            </div>

错误：

 Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. ("Id">Item ID</label>
                <input type="text" class="form-control" placeholder="Enter Item ID" [ERROR ->][(ngModel)]="itemid" name="itemid">
            </div>
            <div class="form-group"> "): ng:///AppModule/ReportComponent.html@6:80
        at syntaxError (compiler.es5.js:1694)
        at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12932)
        at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27126)
        at compiler.es5.js:27045
        at Set.forEach (<anonymous>)
        at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27045)
        at compiler.es5.js:26932
        at Object.then (compiler.es5.js:1683)
        at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
        at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)

我的component.ts文件

import { NgModule,Component,Pipe,OnInit } from '@angular/core';
import { ReportserviceService } from '../../../service/reportservice.service'


@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})

export class ReportComponent implements OnInit {

  itemid:Number;
  typeofdefect:String;
  reportdescription:String;
  constructor() { }

public reportservice:ReportserviceService;


  ngOnInit() {
  }


  savereportdata(){   

  const reportitem = {
    itemid:this.itemid,
    typeofdefect:this.typeofdefect,
    reportdescription:this.reportdescription
  };


   this.reportservice.reportitemdata(reportitem).subscribe(res=>{
    console.log(res);
  }); 

  }

}

我的app.module.ts文件

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import{RouterModule,Routes } from '@angular/router';

import { ReportserviceService } from './service/reportservice.service';

import { AppComponent } from './app.component';


const applicationRoutes:Routes=[
{path:'report',component:ReportComponent},
{path:'requestexisting',component:ExistingitemComponent},
{path:'requestnew',component:NewitemComponent},
{path:'allocateproperties',component:AllocatepropertiesComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    //more codes

  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgModule,
    RouterModule.forRoot(applicationRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我整整一个月都在寻找解决方案。但仍然无法解决。

my @angular/cli:1.4.2
node: 6.10.3
os: win32 x64

Answer 1

将服务放在构造函数中

constructor(public reportservice:ReportserviceService) { }


//Add in app.module.ts
import { HttpModule } from '@angular/http';
imports :[HttpModule]

//Add in service 
import { Http } from '@angular/http';
inject http in construtor like this
constructor(private http : Http);

Angular 4 表单 [(ngModel)] 错误

Angular 4 form [(ngModel)] error

mean-stack

angular-ngmodel

angular

angular4-forms