Angular 4.3 - HttpClient设置参数

Question

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

Answer 1

在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})
}

Answer 2

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

Answer 3

在更新版本的@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]);
});

Answer 4

至于我,链接set方法是最干净的方法

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

Answer 5

2个简单的替代品

没有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);

Answer 6

另一个选择是:

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

Answer 7

由于HTTP Params类是不可变的,因此您需要链接set方法:

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

Answer 8

使用它可以避免循环.

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

此外,我建议在常用服务中使用HttpParams函数.因此,您可以调用该函数将对象转换为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,您可以轻松删除它或根据需要进行更改.