Question

我有ts文件，我想在组件内部创建POST方法。不幸的是，我尝试了下面显示的方式而没有正面结果。

this.http.post("http://localhost:8000/", JSON.stringify({ body: 'String' }), {headers:{'Content-Type': 'application/json'}})

更新

我稍微修改了我的后端逻辑，我意识到我不需要用POST方法发送正文。我可以在URL参数中发送我的数据。我想发送GET请求并将收到的数据分配给需要object.sth类型对象的对象Isth[]。此时我的代码看起来如下所示。但是，分配后console.log("data: "+object.sth);会返回data: undefined。

this.http.get("http://localhost:8000/path?sth=exampleurl", headers).map(res => res.json()).subscribe(data => this.data = data);
object.sth = this.data;

Answer 1

this.http.post(url, JSON.stringify(YOURSTRING), {headers:{'Content-Type': 'application/json'}})

它应该适用于请求。（呃第一个问题）

Answer 2

我将使用更完整的语法更新答案。希望这可以让你在没有错误的情况下运行。

import { Http }       from '@angular/http';
import { Component }          from '@angular/core';
import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  template: `<h1>Hello World</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    private headers: Headers;
    private options: RequestOptions;

    constructor(private http: Http) {
        this.headers = new Headers({ 'Content-Type': 'application/x-www-form-        urlencoded' });
        this.options = new RequestOptions({ headers: this.headers });
    }

    ngOnInit() {
        this.doPost().subscribe(response => {
            console.log(response);
        });
    }

    doPost() {
        return this.http.post("http://localhost:8000/sth", this.options).map(res => res.json());
    }
}

原件：我认为你缺少的是订阅。除非您订阅，否则Observable不会执行。

this.http.post("http://localhost:8000/", JSON.stringify({ body: 'String' }), {headers:{'Content-Type': 'application/json'}}).subscribe(res=>console.log(res));

只是为了记录，通常最好将http调用放在服务中，而不是放在组件内部。

Answer 3

在你的组件顶部

import { Headers, Http } from "@angular/http";

你的组件：

constructor(private http: Http) {} 

yourRequest() {
   let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded' })

  this.http.post(url, JSON.stringify(YOURSTRING), headers).subscribe(res=>console.log(res));
}

如何修改Angular组件以从后端获取信息？

3 个答案: