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

Bu neden çalışmıyor? Sadece 'aaa'yı ayarladı,' bbb'yi DEĞİL

Ayrıca, bir nesnem var {aaa: 111, bbb: 222} Döngü olmadan tüm değerleri nasıl ayarlayabilirim?

GÜNCELLEME (bu işe yarıyor gibi görünüyor, ancak döngüden nasıl kaçınabilir?)

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

5.0.0-beta.6'dan önce

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

5.0.0-beta.6'dan beri

5.0.0-beta.6'dan (2017-09-03) bu yana yeni özellik eklediler (HttpClient üstbilgileri ve parametreleri için nesne haritasını kabul edin)

İleriye doğru nesne HttpParams yerine doğrudan iletilebilir.

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'ın değişmez olması amaçlanmıştır. setVe appendyöntemler mevcut örneğini değiştirmez. Bunun yerine, değişiklikler uygulanarak yeni örnekler döndürürler.

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

Bu yaklaşım, yöntem zincirleme ile iyi çalışır:

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

... bunlardan herhangi birini koşullara uydurmanız gerekirse, bu garip olabilir.

Döngünüz, döndürülen yeni örneğe bir referans aldığınız için çalışır. Gönderdiğiniz kod çalışmıyor, çalışmıyor. Sadece set () 'i çağırır ama sonucu almaz.

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

Daha yeni sürümlerinde @angular/common/http(5.0 ve üstü, görünüşe göre), nesneyi doğrudan içeri iletmek için fromObjectanahtarını kullanabilirsiniz HttpParamsOptions:

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

Bu sadece kaputun altında bir forEachdöngü oluşturur :

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]);
});

Bana gelince, zincirleme setyöntemleri en temiz yol

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

Birkaç Kolay Alternatif

HttpParamsNesneleri kullanmadan

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

this.http.post(url, body);

HttpParamsNesneleri Kullanma

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

this.http.post(url, body);

Bunu yapmanın başka bir yolu:

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

HTTP Params sınıfı değişmez olduğundan, set yöntemini zincirlemeniz gerekir:

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

Bunu kullanarak döngüden kaçınabilirsiniz.

// 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());

Ayrıca, yaygın olarak kullandığınız hizmette toHttpParams işlevini yapmanızı öneririm . Böylece, nesneyi HttpParams'a dönüştürmek için işlevi çağırabilirsiniz .

/**
 * 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());
}

Güncelleme:

5.0.0-beta.6'dan (2017-09-03) bu yana yeni özellik eklediler ( HttpClient üstbilgileri ve parametreleri için nesne haritasını kabul edin )

İleriye doğru nesne HttpParams yerine doğrudan iletilebilir.

Bu, yukarıda bahsedilen toHttpParams gibi ortak bir işlevi kullandıysanız , bunu kolayca kaldırabilir veya gerekirse değişiklik yapabilirsiniz.

Https://github.com/angular/angular/blob/master/packages/common/http/src/params.ts adresindeki uygulamadan görebildiğim kadarıyla

Değerleri ayrı ayrı sağlamalısınız - Döngünüzden kaçınamazsınız.

Ayrıca bir dizgeyi parametre olarak alan bir kurucu da vardır, ancak formdadır, param=value&param2=value2bu nedenle Sizin için bir anlaşma yoktur (her iki durumda da nesnenizi döngüye almayı bitireceksiniz).

Her zaman bir sorunu / özellik talebini angular'a bildirebilirsiniz, bunu şiddetle tavsiye ederim: https://github.com/angular/angular/issues

Not: setve appendyöntemler arasındaki farkı hatırlayın ;)

@MaciejTreder döngü yapmamız gerektiğini onayladığından, burada isteğe bağlı olarak bir dizi varsayılan parametreye eklemenize izin verecek bir sarmalayıcı var:

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 };
}

Bunu şu şekilde kullanabilirsiniz:

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

Herhangi bir karmaşık dto nesnesini (yalnızca "dize sözlüğü" değil) HttpParams'a dönüştürmek için yardımcı sınıfım (ts):

import { HttpParams } from "@angular/common/http";

export class HttpHelper {
  static toHttpParams(obj: any): HttpParams {
    return this.addToHttpParams(new HttpParams(), obj, null);
  }

  private static addToHttpParams(params: HttpParams, obj: any, prefix: string): HttpParams {    
    for (const p in obj) {
      if (obj.hasOwnProperty(p)) {
        var k = p;
        if (prefix) {
          if (p.match(/^-{0,1}\d+$/)) {
            k = prefix + "[" + p + "]";
          } else {
            k = prefix + "." + p;
          }
        }        
        var v = obj[p];
        if (v !== null && typeof v === "object" && !(v instanceof Date)) {
          params = this.addToHttpParams(params, v, k);
        } else if (v !== undefined) {
          if (v instanceof Date) {
            params = params.set(k, (v as Date).toISOString()); //serialize date as you want
          }
          else {
            params = params.set(k, v);
          }

        }
      }
    }
    return params;
  }
}

console.info(
  HttpHelper.toHttpParams({
    id: 10,
    date: new Date(),
    states: [1, 3],
    child: {
      code: "111"
    }
  }).toString()
); // id=10&date=2019-08-02T13:19:09.014Z&states%5B0%5D=1&states%5B1%5D=3&child.code=111

Aynı anahtar adına sahip birkaç parametre eklemek istiyorsanız, örneğin: www.test.com/home?id=1&id=2

let params = new HttpParams();
params = params.append(key, value);

Eklemeyi kullanın, eğer set kullanırsanız, aynı anahtar adıyla önceki değerin üzerine yazacaktır.

Bu çözümler benim için çalışıyor,

let params = new HttpParams(); Object.keys(data).forEach(p => { params = params.append(p.toString(), data[p].toString()); });