Question

我正在尝试将Angular 2连接到Express。我已经使用Postman设置和测试服务器端点（内容类型似乎是x-www-form-encoded以使其工作）但除此之外我不知道是否有任何特殊配置的角度2来承载该请求。我猜它的内容类型不正确或者什么。

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

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");
});

Answer 1

您需要明确设置Content-Type标头。目前，Angular2不会为你设置。

var headers = new Headers();
headers.append('Content-Type', 'x-www-form-encoded');
this._http.post("http://localhost:3001/export", form, {
  headers: headers
}).subscribe();

此外，您需要利用URLSearchParams类来构建主体并将其转换为字符串。目前，正文只能作为字符串提供给post类的put / patch / Http方法。

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();

不要忘记导入Headers类：

import {Http, Headers} from 'angular2/http';

快递接收空对象

1 个答案: