Angular 5 - HttpClient Post无法发布

Question

我有一个httpClient post，通过一个服务，没有任何错误，但是它也没有将数据发布到数据库中。

这是代码：

dataService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DataService {

  constructor(private http: HttpClient) {}

  insertData() {
    const body = JSON.stringify({firstName: 'Joele', lastName: 'Smith4'});
    return this.http.post('http://myurl/index.php', body, httpOptions);
  }

}

组件的主要逻辑和功能代码通常存储在一个 TypeScript 文件中，该文件的命名约定为“组件名称.component.ts”。 每个组件都至少有一个与其相关联的组件类，它负责定义组件的属性和方法，并可以通过实现 Angular 的“生命周期钩子”来控制其行为。

import { Component } from '@angular/core';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private dataService: DataService) {}

  myInsert() {
    if (this.dataService.insertData()) {
      alert('Data Inserted Successfully');
    }

  }

}

最后是app.component.html

<div (click)="myInsert()">Click Me</div>

我在Chrome网络中检查了这个帖子，但什么也没有显示出来。我该如何解决？

- user9128680

---

可能是Angular 2 http.post() is not sending the request的重复问题。 - JB Nizet

Answer 1

Observables需要被观察才能发出请求。

myInsert() {
  this.dataService.insertData().subscribe(
    response => console.log(response),
    err => console.log(err)
  );
}

- user4676340

Answer 2

我曾经遇到过同样的问题，使用FormData解决了。你可以试一下，这对我有效。

insertData() {
    let body = new FormData();
    body.append('firstName', 'Joele');
    body.append('lastName', 'Smith4');

    return this.http.post('http://myurl/index.php', body, httpOptions);
}

- lt.price

Answer 3

let params = new HttpParams()
params=params.set('firstName', 'Joele');
params=params.set('lastName', 'Smith4');

this.http.post('http://myurl/index.php', params , httpOptions);

- Niran Manandhar

---

请问您能否解释一下为什么这是一个解决方案，以及它如何修复这个问题呢？ - Paul Rooney