Typescript AngularJS2HTTPPOST:Object不'；t支持属性或方法'；toPromise'；_Typescript_Angular

Typescript AngularJS2HTTPPOST:Object不'；t支持属性或方法'；toPromise'；

typescript angular

Typescript AngularJS2HTTPPOST:Object不'；t支持属性或方法'；toPromise'；,typescript,angular,Typescript,Angular,这真让我抓狂。我试图通过拼凑各种示例来组装一个基于AngularJS2的简单注册页面。通过工作，我已接近向我的服务器发送一些数据，但我收到： Object doesn't support property or method 'toPromise' at RegisterService.prototype.registerUser (eval code:22:9) at RegisterFormComponent.prototype.submit (eval code:24:9)

这真让我抓狂。我试图通过拼凑各种示例来组装一个基于AngularJS2的简单注册页面。通过工作，我已接近向我的服务器发送一些数据，但我收到：

Object doesn't support property or method 'toPromise'
   at RegisterService.prototype.registerUser (eval code:22:9)
   at RegisterFormComponent.prototype.submit (eval code:24:9)
   at ChangeDetector_RegisterFormComponent_0.prototype.handleEventInternal (Function code:600:1)
   at AbstractChangeDetector.prototype.handleEvent (http://localhost:53078/register.html:8036:9)
   at AppView.prototype.triggerEventHandlers (http://localhost:53078/register.html:10736:7)
   at Anonymous function (Function code:753:118)
   at Anonymous function (http://localhost:53078/register.html:13905:7)
   at Anonymous function (http://localhost:53078/register.html:13254:11)
   at Zone.prototype.run (http://localhost:53078/libs/angular2-polyfills.js:1243:14)
   at Anonymous function (http://localhost:53078/register.html:13456:15)

我相信我的代码中适用的行是：

return this.http.post(this._registerUrl, body, options)
    .toPromise()
    .then(this.extractData)
    .catch(this.handleError);

我试图建立一个基于承诺的系统，但如果我尝试使用一个基于可观察的系统，我会收到类似的结果：

Object doesn't support property or method 'map'
   at RegisterService.prototype.registerUser (eval code:24:9)
   at RegisterFormComponent.prototype.submit (eval code:24:9)
   at ChangeDetector_RegisterFormComponent_0.prototype.handleEventInternal (Function code:600:1)
   at AbstractChangeDetector.prototype.handleEvent (http://localhost:53078/libs/angular2.dev.js:8036:9)
   at AppView.prototype.triggerEventHandlers (http://localhost:53078/libs/angular2.dev.js:10736:7)
   at Anonymous function (Function code:753:118)
   at Anonymous function (http://localhost:53078/libs/angular2.dev.js:13905:7)
   at Anonymous function (http://localhost:53078/libs/angular2.dev.js:13254:11)
   at Zone.prototype.run (http://localhost:53078/libs/angular2-polyfills.js:1243:14)
   at Anonymous function (http://localhost:53078/libs/angular2.dev.js:13456:15)

下面是我基于promise的应用程序的源代码

Register.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Angular 2 with ASP.NET 5</title>

    <!-- Load library bits and pieces -->
    <link href="/libs/css/bootstrap.css" rel="stylesheet" />
    <script src="/libs/es6-shim.min.js"></script>
    <script src="/libs/system-polyfills.js"></script>
    <script src="/libs/shims_for_IE.js"></script>
    <script src="/libs/angular2-polyfills.js"></script>
    <script src="/libs/system.js"></script>
    <script src="/libs/rx.js"></script>
    <script src="/libs/angular2.dev.js"></script>
    <script src="libs/http.dev.js"></script>

    <!-- Load our bits and pieces -->
    <link href="/styles/forms.css" rel="stylesheet" />

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                scripts: {
                    defaultExtension: 'js'
                }
            }
        });
    </script>
    <script>

        System.import('scripts/register-boot.js')
              .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <h2>Let's Get Started!</h2>
    <register-form>Loading...</register-form>
</body>
</html>

<div class="container">
    <h2>Details</h2>
    <form>
        <div class="form-group">
            <label for="phoneNumber">Phone Number</label>
            <input type="text" class="form-control" required
                    [(ngModel)]="request.phoneNumber" 
                    ngControl="phoneNumber" #phoneNumber="ngForm">
            <div [hidden]="phoneNumber.valid || phoneNumber.pristine"
                class="alert alert-danger">
                Phone number is required.
            </div>
        </div>

        <div class="form-group">
            <label for="pinNumber">Pin Number</label>
            <input type="text" class="form-control" required
                   [(ngModel)]="request.pinNumber"
                   ngControl="pinNumber" #pinNumber="ngForm">
            <div [hidden]="pinNumber.valid || pinNumber.pristine"
                 class="alert alert-danger">
                Pin number is required.
            </div>
        </div>
        <button type="submit" class="btn btn-default" (click)="submit();">Register</button>
    </form>
</div>

注册服务。ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

import {Component} from 'angular2/core';
import {NgForm} from 'angular2/common';
import { HTTP_PROVIDERS } from 'angular2/http';
import { RegisterRequest } from './register-request'
import { RegisterService } from './register-service'

// directives: [HeroFormComponent] Should I add this?
@Component({
    selector: 'register-form',
    templateUrl: 'fragments/register-form.component.html',
    providers:  [
        HTTP_PROVIDERS,
        RegisterService,
    ]

})

export class RegisterFormComponent {

    constructor(private _registerService: RegisterService) { }

    request = new RegisterRequest("", "");
    errorMessage: string;

    submit() {
        // if (!model) { return; }
        this._registerService.registerUser(this.request.phoneNumber,
                this.request.pinNumber)
            .then(result => null,
            error => this.errorMessage = <any>error);
    }
}

import {Component} from 'angular2/core';

export class RegisterRequest {
    constructor(public phoneNumber: string,
        public pinNumber: string) {
    }
}

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

@Injectable()
export class RegisterService {
    constructor (private http: Http) {}

    private _registerUrl = '/api/account/register';

    registerUser(phoneNumber: string, pinNumber: string): Promise<string> {

        let body = JSON.stringify({ phoneNumber, pinNumber });
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this._registerUrl, body, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        if (res.status < 200 || res.status >= 300) {
            throw new Error('Bad response status: ' + res.status);
        }
        let body = res.json();
        return body.data || {};
    }

    private handleError(error: any) {
        let errMsg = error.message || 'Server error';
        return Promise.reject(errMsg);
   }
}

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

从'angular2/core'导入{Injectable}；
从'angular2/Http'导入{Http，Response，Headers，RequestOptions}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出类注册服务{
构造函数（私有http:http）{}
private _registerUrl='/api/account/register'；
registerUser（phoneNumber:string，pinNumber:string）：承诺{
let body=JSON.stringify（{phoneNumber，pinNumber}）；
let headers=新的头（{'Content-Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
返回this.http.post（this.\u registerUrl、body、options）
.toPromise（）
.然后（此.extractData）
.接住（这个.把手错误）；
}
私有数据（res:Response）{
如果（分辨率状态<200 | |分辨率状态>=300）{
抛出新错误（“错误响应状态：”+res.status）；
}
让body=res.json（）；
返回body.data |{}；
}
私有句柄错误（错误：任意）{
让errMsg=error.message | |“服务器错误”；
返回承诺。拒绝（errMsg）；
}
}

找到了它。这：

注册boot.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

import {Component} from 'angular2/core';
import {NgForm} from 'angular2/common';
import { HTTP_PROVIDERS } from 'angular2/http';
import { RegisterRequest } from './register-request'
import { RegisterService } from './register-service'

// directives: [HeroFormComponent] Should I add this?
@Component({
    selector: 'register-form',
    templateUrl: 'fragments/register-form.component.html',
    providers:  [
        HTTP_PROVIDERS,
        RegisterService,
    ]

})

export class RegisterFormComponent {

    constructor(private _registerService: RegisterService) { }

    request = new RegisterRequest("", "");
    errorMessage: string;

    submit() {
        // if (!model) { return; }
        this._registerService.registerUser(this.request.phoneNumber,
                this.request.pinNumber)
            .then(result => null,
            error => this.errorMessage = <any>error);
    }
}

import {Component} from 'angular2/core';

export class RegisterRequest {
    constructor(public phoneNumber: string,
        public pinNumber: string) {
    }
}

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

@Injectable()
export class RegisterService {
    constructor (private http: Http) {}

    private _registerUrl = '/api/account/register';

    registerUser(phoneNumber: string, pinNumber: string): Promise<string> {

        let body = JSON.stringify({ phoneNumber, pinNumber });
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this._registerUrl, body, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        if (res.status < 200 || res.status >= 300) {
            throw new Error('Bad response status: ' + res.status);
        }
        let body = res.json();
        return body.data || {};
    }

    private handleError(error: any) {
        let errMsg = error.message || 'Server error';
        return Promise.reject(errMsg);
   }
}

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

///
从“angular2/platform/browser”导入{bootstrap}
从“./register form.component”导入{RegisterPerformComponent}
引导程序（组件）；

应该是这样的：

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import 'rxjs/Rx';
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

///
从“angular2/platform/browser”导入{bootstrap}
进口“rxjs/Rx”；
从“./register form.component”导入{RegisterPerformComponent}
引导程序（组件）；

注意额外的导入。

找到了它。这：

注册boot.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

import {Component} from 'angular2/core';
import {NgForm} from 'angular2/common';
import { HTTP_PROVIDERS } from 'angular2/http';
import { RegisterRequest } from './register-request'
import { RegisterService } from './register-service'

// directives: [HeroFormComponent] Should I add this?
@Component({
    selector: 'register-form',
    templateUrl: 'fragments/register-form.component.html',
    providers:  [
        HTTP_PROVIDERS,
        RegisterService,
    ]

})

export class RegisterFormComponent {

    constructor(private _registerService: RegisterService) { }

    request = new RegisterRequest("", "");
    errorMessage: string;

    submit() {
        // if (!model) { return; }
        this._registerService.registerUser(this.request.phoneNumber,
                this.request.pinNumber)
            .then(result => null,
            error => this.errorMessage = <any>error);
    }
}

import {Component} from 'angular2/core';

export class RegisterRequest {
    constructor(public phoneNumber: string,
        public pinNumber: string) {
    }
}

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

@Injectable()
export class RegisterService {
    constructor (private http: Http) {}

    private _registerUrl = '/api/account/register';

    registerUser(phoneNumber: string, pinNumber: string): Promise<string> {

        let body = JSON.stringify({ phoneNumber, pinNumber });
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this._registerUrl, body, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        if (res.status < 200 || res.status >= 300) {
            throw new Error('Bad response status: ' + res.status);
        }
        let body = res.json();
        return body.data || {};
    }

    private handleError(error: any) {
        let errMsg = error.message || 'Server error';
        return Promise.reject(errMsg);
   }
}

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

///
从“angular2/platform/browser”导入{bootstrap}
从“./register form.component”导入{RegisterPerformComponent}
引导程序（组件）；

应该是这样的：

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import 'rxjs/Rx';
import {RegisterFormComponent} from './register-form.component'
bootstrap(RegisterFormComponent);

///
从“angular2/platform/browser”导入{bootstrap}
进口“rxjs/Rx”；
从“./register form.component”导入{RegisterPerformComponent}
引导程序（组件）；

注意额外的导入。

肯定是

import 'rxjs/Rx';

这就是我在Http中无法获取map方法时所缺少的。我现在可以从服务器检索数据了

可惜这没有更好的记录

万分感谢

肯定是

import 'rxjs/Rx';

这就是我在Http中无法获取map方法时所缺少的。我现在可以从服务器检索数据了

可惜这没有更好的记录

万分感谢

导入'rxjs/add/operator/map'或导入'rxjs/add/operator/toPromise'；导入'rxjs/add/operator/map'或导入'rxjs/add/operator/toPromise'；