Angular 5 - HttpClient Poster ne pas poster

Question

J'ai un post httpClient, via un service, cela ne me donne aucune erreur mais il ne poste pas les données dans la base de données non plus.

Voici le code:

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

}

app.component.ts

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

  }

}

et enfin app.component.html

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

J'ai vérifié sur le réseau chrome pour le poste mais rien n'y est indiqué .. Comment puis-je résoudre ce problème?

Answer 1

Les observables doivent être observés pour faire une demande. 

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

Answer 2

J'ai eu le même problème et j'ai utilisé comme ça (en utilisant FormData). Ça marche pour moi.

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

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

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