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

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

Answer 3

我将使用更完整的语法更新答案。希望这可以让您正常运行。

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 调用放在服务中，而不是在组件中。