[英]Express receiving empty object
I am trying to connect Angular 2 to Express. 我正在尝试将Angular 2连接到Express。 I have already setup and test the server endpoint using Postman (content type seems to be x-www-form-encoded for it to work) but other than that i do not know if there is any special config for angular 2 to carry that request.
我已经使用Postman设置并测试了服务器端点(内容类型似乎是x-www-form-encoded才能正常工作),但除此之外,我不知道是否有针对角度2的特殊配置来承载该请求。 My guess its that the content-type is not correct or something.
我猜这是内容类型不正确或什么。
form.ts 表格
import {Component, ViewEncapsulation} from "angular2/core";
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl, Validators, Control} from "angular2/common";
import { Http } from "angular2/http";
@Component({
selector: "parameters-form",
directives: [FORM_DIRECTIVES],
templateUrl: "dev/form.template.html"
})
export class ParametersForm {
myForm: ControlGroup;
systemParameters: AbstractControl;
param: AbstractControl;
liftOperator: AbstractControl;
restrictOperator: AbstractControl;
xInitial: AbstractControl;
system_arr: number[];
param_arr: number[];
restrict_arr: number[];
lift_arr: number[];
xinitial_arr: number[];
constructor(fb: FormBuilder, private _http: Http) {
this.myForm = fb.group({
"realisations" : ["", Validators.required],
"numConstSteps" : ["", Validators.required],
"timeHorizon": ["", Validators.required],
"continuationStep" : ["", Validators.required],
"continuationStepSign" : ["", Validators.required],
"numberOfModelParameters" : ["", Validators.required],
"systemParameters" : [""],
"param" : [""],
"netLogoFile" : ["", Validators.required],
"numberOfModelVariables" : ["", Validators.required],
"restrictOperator" : [""],
"liftOperator" : [""],
"xInitial" : [""]
});
this.system_arr = [];
this.param_arr = [];
this.restrict_arr = [];
this.lift_arr = [];
this.xinitial_arr = [];
this.param = this.myForm.controls["param"];
this.systemParameters = this.myForm.controls["systemParameters"];
this.restrictOperator = this.myForm.controls["restrictOperator"];
this.liftOperator = this.myForm.controls["liftOperator"];
this.xInitial = this.myForm.controls["xInitial"];
}
addToArray(event, value: number, target: string): void {
if (event.which === 13) {
switch (target) {
case "systemParameters":
this.system_arr.push(value);
(<Control>this.systemParameters).updateValue("");
break;
case "param":
this.param_arr.push(value);
(<Control>this.param).updateValue("");
break;
case "liftOperator":
this.lift_arr.push(value);
(<Control>this.liftOperator).updateValue("");
break;
case "restrictOperator":
this.restrict_arr.push(value);
(<Control>this.restrictOperator).updateValue("");
break;
case "xInitial":
this.xinitial_arr.push(value);
(<Control>this.xInitial).updateValue("");
break;
}
}
}
deleteItem(value: any, target: string): void {
let pos = 0;
switch (target) {
case "systemParameters":
pos = this.system_arr.indexOf(value);
this.system_arr.splice(pos, 1);
break;
case "param":
pos = this.param_arr.indexOf(value);
this.param_arr.splice(pos, 1);
break;
case "liftOperator":
pos = this.lift_arr.indexOf(value);
this.lift_arr.splice(pos, 1);
break;
case "restrictOperator":
pos = this.restrict_arr.indexOf(value);
this.restrict_arr.splice(pos, 1);
break;
case "xInitial":
pos = this.xinitial_arr.indexOf(value);
this.xinitial_arr.splice(pos, 1);
break;
}
}
isFullfilled(m: number, n: number) {
if (
m == this.restrict_arr.length
&& m == this.xinitial_arr.length
&& m == this.lift_arr.length
&& n == this.param_arr.length
&& n == this.system_arr.length
) {
if (m != 0 && n != 0 ){
return true;
}
}
return null;
}
onSubmit(form: any): void {
let form = form;
form.systemParameters = this.system_arr;
form.liftOperator = this.lift_arr;
form.restrictOperator = this.restrict_arr;
form.param = this.param_arr;
form.xInitial = this.xinitial_arr;
this._http.post("http://localhost:3001/export", form).subscribe();
console.log("your submitted value:", form);
}
}
server.js server.js
var express = require('express');
var bodyParser = require('body-parser')
var cors = require('cors');
var app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/export', function(req, res){
var body = req.body;
res.send(body);
console.log(body);
});
app.listen("3001", function(){
console.log("Express server running on localhost:3001");
});
You need to set explicitly the Content-Type
header. 您需要显式设置
Content-Type
标头。 Angular2 won't set it under the hood for you at the moment. Angular2不会将它此刻的引擎盖给你下 。
var headers = new Headers();
headers.append('Content-Type', 'x-www-form-encoded');
this._http.post("http://localhost:3001/export", form, {
headers: headers
}).subscribe();
Moreover you need to leverage the URLSearchParams
class to build the body and convert it as a string. 此外,您需要利用
URLSearchParams
类来构建主体并将其转换为字符串。 At the moment, the body can only be provided as a string to the post
/ put
/ patch
method of the Http
class. 目前,正文只能作为字符串提供给
Http
类的post
/ put
/ patch
方法。
var form = new URLSearchParams();
form.set('systemParameters', this.system_arr);
form.set('liftOperator', this.lift_arr);
(...)
this._http.post("http://localhost:3001/export", form.toString(), {
headers: headers
}).subscribe();
Don't forget to import the Headers
class: 不要忘记导入
Headers
类:
import {Http, Headers} from 'angular2/http';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.