单击按钮“例外：评估“单击”时出错”

Question

组件：

import {Component , EventEmitter} from 'angular2/core';
import {fixedHeader} from '../header/fixed-header.component.ts';
import {FooterComponent} from '../footer/footer.component.ts';
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common';
import {HttpService} from "./http-service.ts";

import {ControlMessages} from './control-messages.component.ts';
import {ValidationService} from './validation_service.ts';

import {Http} from "angular2/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/Rx';
import {Headers} from "angular2/http";

@Component({
    selector:'registration-component'
    directives:[fixedHeader, FooterComponent , ControlMessages],
    providers: [HttpService],
    template:`
<fixed-header></fixed-header>   
<form [ngFormModel]="userForm">  

<div class="container" id="wrap">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                    <br><br>
                    <legend><b>Client Personal Details:</b></legend>
                        <div class="row">
                            <div class="col-xs-6 col-md-3">
                                <h4>   Client Name:</h4>
                            </div>
                            <div class="col-xs-6 col-md-8">
                                <input type="text" id="fullname"  class="form-control input-lg" placeholder="Full Name"  ngControl="fullname" #fullname/> 
                            </div>
                            <div class="col-xs-6 col-md-1">
                                <control-messages control="fullname"></control-messages>
                            </div>  
                        </div>
                        <button class="btn btn-lg btn-success btn-block signup-btn" 
        [disabled]="!userForm.valid" 
        (click) ="saveUser(fullname.value)" >
    Create Account
</button>
                        <br><br>
            </div>
        </div>            
    </div> 
</form> 
<footer-component></footer-component>
    `   
})


export class RegistrationComponent
{   
    response : string;
    userForm: any;
    constructor(
      private _formBuilder: FormBuilder) {

        this.userForm = this._formBuilder.group({
          'fullname': ['', Validators.required],

      });
    }

    constructor(private _httpService: HttpService) {}

    saveUser( fullname : string)
            {
                const data = {
                            fullname : fullname
                };

                    this._httpService.createPost(data)
                        .subscribe(
                            data => this.response = data, 
                            error => console.log(error)
                        );
            }

}

服务：

import {Injectable} from 'angular2/core';
import {Http , Headers , RequestOptions} from "angular2/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/Rx';

@Injectable()
export class HttpService {
    constructor(private _http: Http) {}

    createPost(data:any)
    {
        const body = JSON.stringify(data);
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this._http.post('storeSignUpData/', body, {
                headers: headers
                })
                //.map(res => res.json().data);
                .catch(this.handleError)
    }

    private handleError (error: any) {
        console.error("Error");
        console.error(error);
    }

}

main.ts


   import {bootstrap}        from 'angular2/platform/browser';
import {AppComponent}     from './app.component.ts';
import {HTTP_PROVIDERS , JSONP_PROVIDERS} from "angular2/http";
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common';
bootstrap(
        AppComponent, [
                         ROUTER_PROVIDERS , FORM_PROVIDERS , HTTP_PROVIDERS , JSONP_PROVIDERS ,
                         provide(
                                 LocationStrategy, {useClass: HashLocationStrategy}
                                 )
                         ]
        );


Error:

     angular2.dev.js:23501 EXCEPTION: Error during evaluation of "submit"BrowserDomAdapter.logError @

angular2.dev.js:23501BrowserDomAdapter.logGroup @ angular2.dev.js:23512ExceptionHandler.call @ angular2.dev.js:1185（匿名函数）@ angular2.dev.js:12489NgZone._notifyOnError @ angular2.dev.js:13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13437Zone.run @ angular2-polyfills.js:1247(匿名 函数）@angular2.dev.js:13456NgZone.run@ angular2.dev.js:13418outsideHandler @ angular2.dev.js:13253Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220 angular2.dev.js:23501 原始异常：TypeError：无法读取属性“createPost” undefinedBrowserDomAdapter.logError @ angular2.dev.js:23501ExceptionHandler.call @ angular2.dev.js:1194（匿名函数）@ angular2.dev.js:12489NgZone._notifyOnError @ angular2.dev.js:13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13437Zone.run @ angular2-polyfills.js:1247(匿名 函数）@angular2.dev.js:13456NgZone.run@ angular2.dev.js:13418outsideHandler @ angular2.dev.js:13253Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220 angular2.dev.js:23501 原始堆栈跟踪：

将数据发布到服务器时出错。我不知道出了什么问题。伙计们有什么想法..

Answer 1

你的错误很明显

EXCEPTION: TypeError: Cannot read property 'createPost' of undefined

这意味着this._httpService 未定义。

我唯一能看到的是你的导入中混合了单引号和双引号，你应该把它们都改成单引号。

例如，您的错误行是使用双引号的这一行（在其他使用双引号的行中）

import {HttpService} from "./http-service.ts";

您应该将其更改为使用单引号

import {HttpService} from './http-service.ts';

而且你的服务中的那些可能也会造成麻烦。

这是在 angular2 的 repo 中的 issue 中跟踪的一个问题，并在 TypeScript 的 repo 中的 issue 中得到了回答。

编辑

上述评论仍然有效，但我刚刚看到我认为（再次）是你的问题

你有两个构造函数

constructor(
  private _formBuilder: FormBuilder) {
   // ...
}

constructor(private _httpService: HttpService) {}

保留其中一个

constructor(private _formBuilder: FormBuilder, private _httpService: HttpService) {
   // ...
}