Question

我想通过angular＆＃39的HttpClient发送POST请求。

这是我的打字稿代码：

saveEvent() {
        let header = new HttpHeaders({ 'Content-Type': 'application/json' });
        return this.http.post(this.eventUrl, JSON.stringify(this.data), { headers: header });
}

我的HTML代码：

<button (click)="saveEvent()">Click me!</button>

我没有任何表单，只想通过POST请求将JSON发送到服务器。正如我在chrome控制台上看到的那样，请求未发送。如何解决这个问题？

Answer 1

这里有两件事。

从事件处理程序发出http请求不是一个好习惯。使您的组件不利于单元测试。
没有订阅。

以下是代码的外观。

一个。您的组件有模板。

＆＃13;

<button (click)="saveEvent()">Click me!</button>

＆＃13;

湾您的组件类代码，它将具有构造函数和服务提供者注入的依赖关系

saveEvent(): void{

  this._serviceProvider.PostData(this.data)
  .subscribe(data => {
    console.log(JSON.stringify(data));
    //Show Some Message. Say pop a dialog/modal confirming the data save.
  })

}

℃。服务提供程序中的代码，用于发布数据并进行实际的HTTP调用。

public PostData(data: any): Observable<any> {


            //Check if you need access tokens. Usually posts need access tokens. 
             let access_token: string = "";

            let url: string = "https://YourPostDataUrl/PostdataEndPoint";
            let headers = new Headers({
                'Authorization': 'Bearer ' + access_token,
                'Content-Type': 'application/json'
            });

            let options = new RequestOptions({ headers: headers });

            return this._http.post(url, data, options)
                .map(res => res.json())
                .catch(this.handleError)

}

Answer 2

您需要订阅任何HTTP请求，包括发布以使其正常工作。您的代码只是声明您打算执行发布请求。以下是我对表单进行HTTP POST的示例：

https://github.com/Farata/angulartypescript/blob/master/code-samples/chapter12/client/src/app/restclientpost/app.component.ts

如何通过angular＆＃39的HttpClient发送POST请求？

2 个答案: