API post 调用冲突 Angular2 .map defaultOptions.merge 不是函数

Question

我试图通过 post 方法调用 API，但出现此错误：

this._defaultOptions.merge 不是函数...

我正在检查一些答案，我尝试导入但不起作用

导入'rxjs/add/operator/map';
导入'rxjs/rx';

这是我的代码，如果你想试一试，请：

books.service.ts

import {Injectable} from 'angular2/core';
import {iBooks} from './books.interface';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class bookService {
    private _getApi = 'URLAPI';

    constructor(private _http: Http) { }

    getInfo(payload: any): Observable<iBooks[]> {
        return this._http.post(this._getApi, payload)
            .map((response: Response) => <iBooks[]>response.json())
            .do(data => console.log("All: " +  JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

}

也是组件

books.component.ts

import {iBooks}                  from './books.interface';
import {bookService}            from './books.service';

@Component({
    selector:       'books-list',
    templateUrl:     './books.component.html',
    providers:      [bookService]
})

export class bookComponent implements OnInit {

    errorMessage: string;

    trips: iBooks[];
    _payload: bookMode;

    constructor(private _bookService: bookService){

    }
    ngOnInit(): void {
    this._bookService.getInfo(this._payload)
        .subscribe(
            trips => this.trips = trips,
            error => this.errorMessage = <any>error);
    }
}
export class bookMode{
    Name: string;
    Pages: number;
    Items: number;
}

更新

books.interface.ts

export interface iBooks {
    Name: string;
    Pages: number;
    Items: number;
}

更新 2

我包括了 app.component 和 main

main.ts

import {bootstrap}          from 'angular2/platform/browser';
import {AppComponent}       from './app.component';
import {provide}            from 'angular2/core';
import {ROUTER_PROVIDERS}   from 'angular2/router';

import 'rxjs/Rx';

import {HTTP_PROVIDERS, Headers, RequestOptions} from 'angular2/http'; // Required by credetials 

class requestCredentials {
headers: Headers = new Headers({
    'X-Requested-With': 'XMLHttpRequest'
});
withCredentials: boolean = true;
}

bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(RequestOptions, {useClass: requestCredentials})]);

app.component.ts

import {Component, ElementRef} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, RouterLink } from 'angular2/router';

import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx'; 

import {EmptyComponent}        from './myComponent.component'

@Component({
    selector: 'my-app',
    templateUrl: './myComponent.component.html',
    directives: [ROUTER_DIRECTIVES, RouterLink]
})

export class AppComponent {

}

任何帮助都会很棒。谢谢大家

Answer 1

将requestCredentials改为

@Injectable()
export class requestCredentials extends RequestOptions {
  constructor() {
    let headers = new Headers();
    headers.append('X-Requested-With', 'XMLHttpRequest');

    super({method: RequestMethod.Get, headers: headers, withCredentials: true});
  }
}

（未测试）

API post 调用冲突 Angular2 .map defaultOptions.merge 不是函数

API post call conflict Angular2 .map defaultOptions.merge is not a function in

angular

angular2-template

angular2-directives

angular2-services

books.service.ts

books.component.ts

更新

books.interface.ts

更新 2

main.ts

app.component.ts