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

Почему это не работает? Он устанавливает только 'aaa', а НЕ 'bbb'

Кроме того, у меня есть объект {aaa: 111, bbb: 222} Как я могу установить все значения без цикла?

ОБНОВЛЕНИЕ (похоже, это работает, но как избежать цикла?)

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

До 5.0.0-beta.6

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

Начиная с 5.0.0-beta.6

Начиная с 5.0.0-beta.6 (2017-09-03) они добавили новую функцию (принять карту объектов для заголовков и параметров HttpClient)

В дальнейшем объект можно передать напрямую вместо 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 должен быть неизменным. В setи appendметоды не изменять существующий экземпляр. Вместо этого они возвращают новые экземпляры с примененными изменениями.

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

Этот подход хорошо работает с цепочкой методов:

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

... хотя это может быть неудобно, если вам нужно обернуть любое из них в условиях.

Ваш цикл работает, потому что вы захватываете ссылку на возвращенный новый экземпляр. Код, который вы опубликовали, не работает, не работает. Он просто вызывает set (), но не получает результат.

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

В более поздних версиях @angular/common/http(5.0 и выше, судя по всему) вы можете использовать fromObjectключ, HttpParamsOptionsчтобы передать объект прямо:

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

Это просто запускает forEachцикл под капотом :

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

Как по мне, цепочка setметодов - самый чистый способ

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

Пара простых альтернатив

Без использования HttpParamsобъектов

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

this.http.post(url, body);

Использование HttpParamsобъектов

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

this.http.post(url, body);

Другой вариант сделать это:

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

Поскольку класс HTTP Params является неизменным, вам необходимо связать метод set:

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

Используя это, вы можете избежать петли.

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

Кроме того, я предлагаю сделать функцию toHttpParams в вашем часто используемом сервисе. Таким образом, вы можете вызвать функцию для преобразования объекта в 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());
}

Обновить:

Начиная с 5.0.0-beta.6 (2017-09-03) они добавили новую функцию ( принять карту объектов для заголовков и параметров HttpClient )

В дальнейшем объект можно передать напрямую вместо HttpParams.

Это еще одна причина, по которой вы использовали одну общую функцию, такую ​​как toHttpParams, упомянутую выше, вы можете легко удалить ее или внести изменения, если это необходимо.

Насколько я могу судить по реализации на https://github.com/angular/angular/blob/master/packages/common/http/src/params.ts

Вы должны указать значения отдельно - вы не сможете избежать цикла.

Существует также конструктор, который принимает строку в качестве параметра, но он имеет форму, param=value&param2=value2поэтому для вас нет сделки (в обоих случаях вы завершите цикл своим объектом).

Вы всегда можете сообщить о проблеме / запросе функции в angular, что я настоятельно рекомендую: https://github.com/angular/angular/issues

PS: Не забывайте о разнице между setи appendметодами;)

Поскольку @MaciejTreder подтвердил, что мы должны зацикливаться, вот оболочка, которая при желании позволит вам добавить в набор параметров по умолчанию:

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

Вы можете использовать это так:

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

Мой вспомогательный класс (ts) для преобразования любого сложного объекта dto (не только «строковый словарь») в HttpParams:

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

Просто хотел добавить, что если вы хотите добавить несколько параметров с одинаковым именем ключа, например: www.test.com/home?id=1&id=2

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

Используйте append, если вы используете set, оно перезапишет предыдущее значение с тем же именем ключа.

Эти решения работают для меня,

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