web-dev-qa-db-fra.com

Comment extraire des données/valeurs de l’objet Promise dans Angular 6?

Ce que j'ai est une simple page d'inscription, qui enregistre les utilisateurs et ajoute les données de formulaire dans la base de données. Ce que je veux, c'est montrer la liste des détails de l'utilisateur, pour lesquels j'ai un composant de registre et un service de référencement. Voici mon register.component.ts:

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserData } from '../userdata';
import { ListingService } from '../listing.service';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

    role : any[];

    data : Promise<any>

    userdata : any[];

    constructor(private listingService : ListingService, private http : Http) { this.role = ["Admin","Super-Admin","User"] }

    selectedRole: Object = {};  

    ngOnInit() {
    }

    registerUser(form: NgForm)
    {
        //console.log(form.value);      
        let details = JSON.stringify(form.value);                       
        this.data = this.listingService.registerUser(details)
        .then((result) => {console.log(result); this.userdata = result;})
        .catch(error => console.log(error));

        alert(this.data);
    }


}

Alerte "alert (this.data)" me donne [objet promesse], ma question est donc de savoir comment récupérer les données de this.data qui est un objet de promesse?

Mon service est, listing.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
//import { toPromise } from 'rxjs/operators';
import { UserData } from './userdata';

@Injectable()

export class ListingService
{
    headers: Headers;
    options: RequestOptions;

    constructor(private http:Http)
    {

    }

    registerUser(details : any) : Promise<any>
    {               
        //alert(details);
        //this.headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8', 
          //                           'Accept': 'q=0.8;application/json;q=0.9' });
        //this.options = new RequestOptions({ headers: this.headers });
        return this.http.post("http://localhost/Angular6http/UserDetails/src/app/data.php",details).toPromise().then(this.extractData).catch(this.handleError);
    }

    private extractData(res: Response) {

        //alert(res);       
        let body = res.json();
        //alert(body);
        return body || {};      
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}
angulartypescriptangular6
3
Jitendra Ahuja

Votre problème est à votre service.

return this.http.post("http://localhost/Angular6http/UserDetails/src/app/data.php",details)      
  .toPromise()
  .then(this.extractData)
  .catch(this.handleError);

Vous appelez des fonctions extractData et handleError sans le (), ce qui n’a rien à voir avec la solution à votre problème, c’est juste un point que je soulève. De plus, vous n'avez pas du tout besoin d'appeler ces fonctions, car vous voulez renvoyer la promesse.

Le code suivant devrait fonctionner:

return this.http.post("http://localhost/Angular6http/UserDetails/src/app/data.php",details)
  .map(res => res.json())
  .toPromise();

Vous manipulez déjà la .then() dans votre composant.

1
Wesley Coetzee

Essaye ça :

    registerUser(form: NgForm)
{
    //console.log(form.value);      
    let details = JSON.stringify(form.value);                       
    this.listingService.registerUser(details)
    .then((result) => {console.log(result); this.userdata = result; this.data = result; alert(this.data);})
    .catch(error => console.log(error));


}

Utilisez la ligne suivante dans votre service:

return this.http.post("http://localhost/Angular6http/UserDetails/src/app/data.php",details)
0
M Fouad Kajj