Depuis mon formulaire Angular 6, je dois envoyer des données avec la même configuration que celle que j'ai dans Postman (j'envoie une capture d'écran avec la configuration complète: comme vous pouvez le voir, j'ai choisi les options mais raw / Json).

enter image description here

J'ai essayé l'exemple suivant mais cela ne fonctionne pas parce que je reçois un message d'erreur "mauvaise demande 400". C'est mon code qui ne fonctionne pas:

public login() {

        let userPassword = this.registrationForm.get('password').value;
        let userLogin = this.registrationForm.get('email').value;
        let userLangKey = 'en';

        /*
        const transferObject = {

            password: userPassword,
            login: userLogin,
            langKey: userLangKey
        }

        JSON.stringify(transferObject);
        */

        const req = this.http.post('http://localhost:8080/api/register/', {
            password: userPassword,
            login: userLogin,
            langkey: userLangKey
        })
        .subscribe(
            res => {
            console.log(res);
        },
            err => {
            console.log("Error occured");
        }

      );
    }

J'ai également essayé de modifier mon code de cette manière mais je reçois la même erreur:

(...)

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

        const req = this.http.post('http://localhost:8080/api/register/', {
            password: userPassword,
            login: userLogin,
            langkey: userLangKey
            }, httpOptions)

        .subscribe(
            res => {
            console.log(res);
            },
            err => {
            console.log("Error occured");
            }

(...)
-1
Archimede 20 nov. 2018 à 12:15

3 réponses

Meilleure réponse

Je me suis essayé et j'ai résolu le problème; compte tenu de ma dernière version de code que j'ai publiée ici, tout était correct et le problème une fois était simplement activé. Dans la ligne http précédente, je ne définis que ceci. (Blablabla); il suffisait à la fin de cette ligne ".subscribe (blablabla)" d'activer la fonction. Seulement cette commande; rien d'autre. Remercier; Je copie ci-dessous mon code correct. J'espère que cela peut être utile pour quelqu'un d'autre.

public login() {

        let userPassword = this.registrationForm.get('password').value;
        let userLogin = this.registrationForm.get('email').value;
        let userLangKey = 'en';

        const transferObject = {

            password: userPassword,
            login: userLogin,
            langKey: userLangKey
        }

        let header:HttpHeaders = new HttpHeaders().set('Content-Type', 'application/json');

        const object = JSON.stringify(transferObject);
        const self = this;  

                //Here is the point!
        return self.httpClient.post(PathService.authPath()+'register', object, {headers: header}).subscribe((response: Response) => {

            this.helperService.snackBarWarning('all works correctly');
        });
    }
1
Archimede 20 nov. 2018 à 15:28

Je ne sais pas vraiment comment votre formulaire est construit, donc pour cet exemple, je suppose que vous utilisez ngModel ou que vous avez déjà extrait les valeurs nécessaires de votre formulaire.

let l = 'test';
let p = 'pass';
let lk = 'en'

const transferObject = {
  login: l,
  password: p,
  langKey: lk
}

const object JSON.stringify(transferObject);

// requires injecting HttpClient in constructor
this.http.post<object>('http://myurl.com', string);

Ensuite, à la réception, vous pouvez inverser cette action pour récupérer votre objet comme suit:

let string = // receive your string
const receivedObject = JSON.parse(string)

Vous pouvez en savoir plus sur les fonctions JavaScript / Typescript JSON ici: https://www.w3schools.com /js/js_json_stringify.asp

1
Teun van der Wijst 20 nov. 2018 à 10:36

Veuillez utiliser le troisième paramètre pour définir les en-têtes de cette demande de publication.

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};    
this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
1
shan22 20 nov. 2018 à 11:08