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 ORIGINAL EXCEPTION：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 ORIGINAL STACKTRACE：

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

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的回购邮件中的issue中跟踪的问题，并在TypeScript的回购邮件中以issue回答。

修改

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

你有两个构造函数

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

保留其中一个

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

点击按钮“EXCEPTION：评估期间出错”点击“

1 个答案: