javascript - Angular2 发布请求未向服务器发送正确的数据

Question

当我在控制台上记录 this.form.value 时，我正在获取表单字段并将其作为 this.form.value 传递给服务我收到 Object { email: "zxzx", password: "zxzxx"} 当我向服务发送同样的东西并调用服务器时:

import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Injectable} from 'angular2/core'
import {Post} from './post';
import {Observable} from 'rxjs/Observable';


@Injectable()
export class PostService {
//dependency injection
private _url = "http://127.0.0.1/accounts/login_user/";
constructor(private _http:Http) {

}


createPost(post){

    return this._http.post(this._url,JSON.stringify(post))
    .map(res=>res.json());

}
}

正在调用服务器，但未传递值。当我在控制台上记录响应时，我得到:

对象 { _isScalar: false, source: Object, operator: Object }

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

您的 console.log 打印与您的请求相对应的可观察对象，但不打印其结果。如果要打印此结果，可以使用 do 运算符:

createPost(post){
  return this._http.post(this._url,JSON.stringify(post))
    .map(res=>res.json())
    .do(data => {
      console.log(data);
    });
}

你说请求被执行了。如果您订阅可观察对象，实际上就是这种情况:

this.service.createPost(...).subscribe(() => {
  (...)
});

编辑

您还需要设置 Content-Type header :

createPost(post){
  var headers = new Headers();
  headers.append('Content-Type', 'application/json');
  return this._http.post(this._url,JSON.stringify(post), { headers })
    .map(res=>res.json())
    .do(data => {
      console.log(data);
    });
}

编辑2

如果你想发送一个 url 编码的表单:

您还需要设置 Content-Type header :

createPost(post){
  var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  let content = new URLSearchParams();
  content.set('prop', post.prop);
  (...)

  return this._http.post(this._url, content.toString(), { headers })
    .map(res=>res.json())
    .do(data => {
      console.log(data);
    });
}