Angular 4.3 - HttpClient set params

Question

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

Pourquoi cela ne fonctionne-t-il pas ? Il ne fixe que le 'aaa' et PAS le 'bbb'.

De plus, j'ai un objet { aaa : 111, bbb : 222 }. Comment puis-je définir toutes les valeurs sans boucler ?

UPDATE (cela semble fonctionner, mais comment éviter la boucle ?)

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

Answer 1

Avant 5.0.0-beta.6

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

Depuis la version 5.0.0-beta.6

Depuis 5.0.0-beta.6 (2017-09-03), ils ont ajouté une nouvelle fonctionnalité (accepter une carte d'objets pour les en-têtes et les paramètres de HttpClient).

A l'avenir, l'objet peut être passé directement au lieu de 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})
}

Answer 2

HttpParams est destiné à être immuable. L'adresse set y append Les méthodes ne modifient pas l'instance existante. Au lieu de cela, elles renvoient de nouvelles instances, avec les changements appliqués.

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

Cette approche fonctionne bien avec le chaînage de méthodes :

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

...bien que cela puisse être gênant si vous avez besoin d'envelopper l'un d'entre eux dans des conditions.

Votre boucle fonctionne parce que vous saisissez une référence à la nouvelle instance retournée. Le code que vous avez posté et qui ne fonctionne pas, ne fonctionne pas. Il appelle juste set() mais ne récupère pas le résultat.

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

Answer 3

Dans les versions plus récentes de @angular/common/http (5.0 et plus, à ce qu'il semble), vous pouvez utiliser la fonction fromObject clé de HttpParamsOptions pour passer l'objet directement à l'intérieur :

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

Cela fait juste un forEach boucle sous le capot mais.. :

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

Answer 4

Quelques solutions de rechange faciles

Sans utiliser HttpParams Objets

let body = {
   params : {
    'email' : emailId,
    'password' : password
   }
}

this.http.post(url, body);

Utilisation de HttpParams Objets

let body = new HttpParams({
  fromObject : {
    'email' : emailId,
    'password' : password
  }
})

this.http.post(url, body);

Answer 5

Quant à moi, enchaîner set les méthodes sont les plus propres

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