I'm new in AngularJS 2 and I have a problem with getting response from node.js server. Actually I get response from server but can't put it into my object. return from server
this is my code: controllerService.ts
import {Injectable} from 'angular2/core';
import {Http, Response,Headers, RequestOptions} from 'angular2/http';
import {Res} from '../models/res.model';
import {Resoult} from '../models/resoult.model';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class ControllerService{
constructor (private http: Http) {}
retractNumbers(num1:number, num2:number):Promise<Res> {
let body = JSON.stringify({num1: num1,num2: num2});
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('/oduzimanje',body,options)
.toPromise()
.then(res => <Res>res.json().data)
.catch(this.handleError);
}
addNumbers(num1:number, num2:number):Promise<Res> {
let body = JSON.stringify({num1: num1,num2: num2});
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('/sabiranje',body,options)
.toPromise()
.then(res => <Res>res.json().data)
.catch(this.handleError);
}
getResoults(){
return this.http.get('./history')
.map(res => <Resoult[]> res.json().data)
.catch(this.handleErrorGet);
}
private handleError (error: any) {
console.error(error);
return Promise.reject(error.message || error.json().error || 'Server error');
}
private handleErrorGet (error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
additionComponent.ts
import {Component} from 'angular2/core';
import {ControllerService} from '../services/controllerService'
import {Res} from '../models/res.model';
@Component({
selector: 'my-add',
templateUrl: 'app/test-ui/html/addition.component.html'
})export class AdditionComponent{
num1 = 0;
num2 = 0;
resoult = new Res(0);
error: string;
constructor(private _controllerService:ControllerService) {}
onSubmit() {
this._controllerService.addNumbers(this.num1,this.num2)
.then(res => this.resoult = res,error => this.error = <any>error);
}
}
resModel.ts
export class Res{
constructor(public rez:number) {
}
}
appComponent.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {AdditionComponent} from './addition.component';
import {RetractionComponent} from './retraction.component';
import {ResoultComponent} from './resoult.component';
import {ControllerService} from '../services/controllerService';
import {HTTP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'my-app',
templateUrl: 'app/test-ui/html/app.component.html',
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS,
HTTP_PROVIDERS,
ControllerService]
})
@RouteConfig([
{
path: '/addition',
name: 'Addition',
component: AdditionComponent,
useAsDefault: true
},
{
path: '/retraction',
name: 'Retraction',
component: RetractionComponent
},
{
path: '/resoult',
name: 'Resoult',
component: ResoultComponent
}
])export class AppComponent {
title = 'Calculator';
}
Are you sure your map is correct? Your response doesnt contain the key "data" try changing your .map to:
your have:
.then(res => <Res>res.json().data)
try:
.then(res => <Res>res.json())
Worth a try. Hard to tell without errors.