Angolare 4.3 – Parametri impostati HttpClient

let httpParams = new HttpParams().set('aaa', '111'); httpParams.set('bbb', '222'); 

Perché questo non funziona? Imposta solo “aaa” e NON “bbb”

Inoltre, ho un object {aaa: 111, bbb: 222} Come posso impostare tutti i valori senza fare il loop?

AGGIORNAMENTO (sembra funzionare, ma come evitare il ciclo?)

 let httpParams = new HttpParams(); Object.keys(data).forEach(function (key) { httpParams = httpParams.append(key, data[key]); }); 

    Prima della 5.0.0-beta.6

     let httpParams = new HttpParams(); Object.keys(data).forEach(function (key) { httpParams = httpParams.append(key, data[key]); }); 

    Dal 5.0.0-beta.6

    Dal 5.0.0-beta.6 (2017-09-03) hanno aggiunto una nuova funzione (accetta la mappa degli oggetti per le intestazioni e i parametri di HttpClient)

    Andando avanti l’object può essere passato direttamente invece di HttpParams.

     getCountries(data: any) { // We don't need any more these lines // let httpParams = new HttpParams(); // Object.keys(data).forEach(function (key) { // httpParams = httpParams.append(key, data[key]); // }); return this.httpClient.get("/api/countries", {params: data}) } 

    HttpParams è destinato ad essere immutabile. I metodi set e append non modificano l’istanza esistente. Invece restituiscono nuove istanze, con le modifiche applicate.

     let params = new HttpParams().set('aaa', 'A'); // now it has aaa params = params.set('bbb', 'B'); // now it has both 

    Questo approccio funziona bene con il concatenamento del metodo:

     const params = new HttpParams() .set('one', '1') .set('two', '2'); 

    … anche se questo potrebbe essere imbarazzante se hai bisogno di avvolgere qualcuno di loro in condizioni.

    Il tuo ciclo funziona perché stai acquisendo un riferimento alla nuova istanza restituita. Il codice che hai pubblicato non funziona, no. Chiama solo set () ma non acquisisce il risultato.

     let httpParams = new HttpParams().set('aaa', '111'); // now it has aaa httpParams.set('bbb', '222'); // result has both but is discarded 

    Nelle versioni più recenti di @angular/common/http (5.0 e fromObject HttpParamsOptions a HttpParamsOptions da ciò), è ansible utilizzare la chiave HttpParamsOptions di HttpParamsOptions per HttpParamsOptions direttamente l’object:

     let httpParams = new HttpParams({ fromObject: { aaa: 111, bbb: 222 } }); 

    Questo semplicemente esegue un ciclo forEach sotto il cofano , però:

     this.map = new Map(); Object.keys(options.fromObject).forEach(key => { const value = (options.fromObject as any)[key]; this.map !.set(key, Array.isArray(value) ? value : [value]); }); 

    Per quanto mi riguarda, i metodi di set catene sono il modo più pulito

     const params = new HttpParams() .set('aaa', '111') .set('bbb', "222"); 

    Un’altra opzione per farlo è:

     this.httpClient.get('path', { params: Object.entries(data).reduce( (params, [key, value]) => params.set(key, value), new HttpParams()); }); 

    Usando questo puoi evitare il loop.

     // obj is the params object with key-value pair. // This is how you convert that to HttpParams and pass this to GET API. const params = Object.getOwnPropertyNames(obj) .reduce((p, key) => p.set(key, obj[key]), new HttpParams()); 

    Inoltre, suggerisco di creare la funzione HttpParams nel tuo servizio comunemente usato. Quindi puoi chiamare la funzione per convertire l’object in HttpParams .

     /** * Convert Object to HttpParams * @param {Object} obj * @returns {HttpParams} */ toHttpParams(obj: Object): HttpParams { return Object.getOwnPropertyNames(obj) .reduce((p, key) => p.set(key, obj[key]), new HttpParams()); } 

    Aggiornare:

    Dal 5.0.0-beta.6 (2017-09-03) hanno aggiunto una nuova funzione ( accetta la mappa degli oggetti per le intestazioni e i parametri di HttpClient )

    Andando avanti l’object può essere passato direttamente invece di HttpParams.

    Questa è l’altra ragione se hai usato una funzione comune come sopraHttpParams menzionata sopra, puoi facilmente rimuoverla o apportare modifiche se necessario.

    Per quanto posso vedere dall’implementazione su https://github.com/angular/angular/blob/master/packages/common/http/src/params.ts

    Devi fornire i valori separatamente – Non sei in grado di evitare il tuo ciclo.

    C’è anche un costruttore che prende una stringa come parametro, ma è in forma param=value&param2=value2 quindi non c’è accordo per te (in entrambi i casi param=value&param2=value2 con il loop dell’object).

    Puoi sempre segnalare un problema / richiesta di funzionalità a spigolosa, cosa che consiglio vivamente: https://github.com/angular/angular/issues

    PS: Ricorda la differenza tra i metodi set e append 😉

    2 alternative facili

    Senza oggetti HttpParams

     let body = { params : { 'email' : emailId, 'password' : password } } this.http.post(url,body); 

    Con oggetti HttpParams

     let body = new HttpParams({ fromObject : { 'email' : emailId, 'password' : password } } this.http.post(url,body); 

    Poiché @MaciejTreder ha confermato che dobbiamo eseguire il ciclo, ecco un wrapper che facoltativamente ti consente di aggiungere a un set di parametri predefiniti:

     function genParams(params: object, httpParams = new HttpParams()): object { Object.keys(params) .filter(key => { let v = params[key]; return (Array.isArray(v) || typeof v === 'string') ? (v.length > 0) : (v !== null && v !== undefined); }) .forEach(key => { httpParams = httpParams.set(key, params[key]); }); return { params: httpParams }; } 

    Puoi usarlo in questo modo:

     const OPTIONS = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), params: new HttpParams().set('verbose', 'true') }; let opts = Object.assign({}, OPTIONS, genParams({ id: 1 }, OPTIONS.params)); this.http.get(BASE_URL, opts); // --> ...?verbose=true&id=1 

    Poiché la class HTTP Params è immutabile, è necessario associare il metodo set:

     const params = new HttpParams() .set('aaa', '111') .set('bbb', "222");