web-dev-qa-db-fra.com

Angular 4, convertit la réponse http observable en objet observable

Je suis novice dans les concepts d'observables et j'ai besoin d'aide pour la conversion.
J'ai un service qui retourne un Observable<Response> à partir d'une requête Http, mais je dois le convertir faire un Observable<PriceTag> pour l'utiliser sur une DataSource à l'intérieur de la méthode de connexion.
Y a-t-il un moyen de faire ça?

C'est la méthode de mon service:

getPriceTags(): Observable<Response> {

    // Set the request headers
    const headers = new Headers({ 'Content-Type': 'application/json' });

    // Returns the request observable
    return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers});

}

Et voici la classe DataSource où je dois le retourner en tant que Observable<PriceTag>:

export class PriceTagDataSource extends DataSource<PriceTag> {

    constructor (private priceTagService: PriceTagService) {
        super();
    }

    connect(): Observable<PriceTag> {

        // Here I retrieve the Observable<Response> from my service
        const respObs = this.priceTagService.getPriceTags();

        // Now I need to return a Observable<PriceTag> 

    }

    disconnect() {}

}

Voici un exemple tiré de la réponse de ma demande:

{
    // This object is used to check if the query on the server was sucessful
    "query": {
        "sucessful": true
    },

    // These are my PriceTags 
    "tags": [
        {
            "id": "1",
            "name": "MAIN"
        },
        {
            "id": "2",
            "name": "CARD"
        }
    ]
}
angulartypescriptrxjsobservable
9
Rafael

Je suppose que votre réponse HTTP est un JSON contenant une balise de prix? Le problème est que vous souhaitez créer un objet PriceTag. Vous pouvez simplement convertir le JSON en un PriceTag par type, mais ce ne sera alors pas un véritable objet PriceTag.

La façon dont nous avons résolu ceci est:

export class Serializable {
  constructor(json?: any) {
    if (json) {
      Object.assign(this, json);
    }
  }
}

Et puis une classe sérialisable:

export class PriceTag extends Serializable {}

Ensuite, votre fonction GetPriceTags doit être modifiée pour:

getPriceTags(): Observable<PriceTag> {

    // Set the request headers
    const headers = new Headers({ 'Content-Type': 'application/json' });

    // Returns the request observable
    return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers})
    .map(res => new PriceTag(res.json()));

}
3
Boland

Dans le Angular 4+, cela peut être fait automatiquement . Vous pouvez changer votre méthode getPriceTags:

export class PriceTagService {
    constructor(private http: HttpClient) {}

    getPriceTags<T>(): Observable<T> {

        // Set the request headers
        const headers = new Headers({ 'Content-Type': 'application/json' });

        // Returns the request observable
        return this.http.post<T>(`${Constants.WEBSERVICE_ADDRESS}/priceTag`, null, {headers: headers});

    }
}

Et votre classe DataSource peut être:

export class PriceTagDataSource extends DataSource<PriceTag> {
    constructor (private priceTagService: PriceTagService) {
        super();
    }

    connect(): Observable<PriceTag> {
        // Here you can retrieve the Observable<PriceTag> from service and return directly
        return this.priceTagService.getPriceTags<PriceTag>();
    }

    disconnect() {}
}
0
SLDev