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

Posted 2023-03-13

【中文标题】如何修改 Angular 组件以从后端获取信息？

【英文标题】：How can I modify Angular component to get information from backend?

【发布时间】：2018-02-18 11:20:06

【问题描述】：

我有 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;

【问题讨论】：

帖子返回了什么？我期待 json，但状态表明它可能是别的东西？您在标题中指出这一点。

@bgraham 我已经更新了我的问题。抱歉更改，但我意识到我可以用另一种方式做到这一点。你知道我现在该如何解决我的问题吗？感谢您的耐心等待！

没问题，希望能帮上忙。打字稿/角度调用看起来不错。你说api从邮递员正确返回？是您的构造函数的“http”。它是“Http”还是“HttpClient”。您可以尝试的一件事可能会有所帮助，那就是删除 .map(res=>res.json())。这样，您将获得整个响应对象，包括状态代码等，而不仅仅是有效负载。您可以尝试将其记录到控制台，看看您是否得到任何回报。告诉我，我会尽力提供更多帮助。

@bgraham 是的，后端可以与 Postman 一起正常工作，并以 JSON 格式发送数据响应。

@bgraham 当我删除.map(res=>res.json()) 我得到Type 'Response' is not assignable to type 'IMytype[]'. Property 'includes' is missing in type 'Response'.

【参考方案1】：

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

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

【讨论】：

我之前试过这个this.http.post("http://localhost:8000", JSON.stringify("My String"), headers:'Content-Type': 'application/json')，但我得到了错误Property 'http' does not exist on type 'PersonComponent'

constructor(private http: HttpClient) 将此字符串添加到您应该通过构造函数注入您的 http 客户端的组件中

Cannot find name 'HttpClient'

@JohnSmith 在文件顶部添加import HttpClient from '@angular/common/http';。

【参考方案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));

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

【讨论】：

在这种情况下，我也会得到Property 'http' does not exist on type 'PersonComponent'。我试过import Http from '@angular/http';，但还是同样的错误。

明白了。您需要将其注入组件的构造函数中。所以构造函数（私有http：http）。然后 Angular 将为您注入服务。

在构造函数中使用private http: Http 我得到Argument of type ' headers: 'Content-Type': string; ; ' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type ' 'Content-Type': string; ' is not assignable to type 'Headers'. Object literal may only specify known properties, and ''Content-Type'' does not exist in type 'Headers'.)

也许把它放在前面：let myHeaders = new Headers(); myHeaders.set('Content-Type', 'application/json'); let options = new RequestOptions( headers: myHeaders );然后传入 myHeaders 而不是 ' headers: 'Content-Type': string; ; '

不幸的是我仍然有错误。我在更新的问题中添加了我的代码。错误内容 - Argument of type ' headers: Headers; ' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'. Two different types with this name exist, but they are unrelated. Property 'keys' is missing in type 'Headers'.)