Question

在Angular 5 HttpClient中，我可以通过这种方式设置HttpParams（）。

const body = new HttpParams().set('email', 'test@mail.com').set('password', 'pass');

但是当我尝试以这种方式设置HttpParams（）时。尚未设置值。

    let paramsMap = new Map<any,any>();
    paramsMap.set('email','test@mail.com');
    paramsMap.set('password','pass');    

    paramsMap.forEach((value: any, key: any) => {
      body.set(key, value);
    });

为什么没有设置？而我该如何以类似方式做到这一点？

Answer 1

API稍有不同，通过这种方式，您可以在查询字符串中发送带有参数的动态请求

let paramsMap = new Map<any,any>();
paramsMap.set('username','admin');
paramsMap.set('password','admin');

let params = new HttpParams();
paramsMap.forEach((value: any, key: any) => {
  params = params.set(key, value);
});

return this.http.request<any>('post', this.url + LOGIN_URL, { 'params': params});

如果检查HttpClient方法，则可以看到其工作原理。

第一个评论的答案：

HttpParams并非一成不变，它用于传递参数来查询字符串。所以您需要的是这样：

let paramsMap = new Map<any,any>();
paramsMap.set('email','test@mail.com');
paramsMap.set('password','pass');   

return this.http.post<any>(this.url + LOGIN_URL, mapToObject(paramsMap));

/**
 * recursive function that receive a Map and returns a JSON object
 * @param map
 * @returns {any}
 */
function mapToObject(map) {
  const out = Object.create(null)
  map.forEach((value, key) => {
    if (value instanceof Map) {
      out[key] = mapToObject(value)
    }
    else {
      out[key] = value
    }
  });
  return out
}

Answer 2

HttpParams是不可变的，因此每次使用set（）方法时，它都会返回一个新实例。您可以通过更新参考来解决此问题：

const params = {
  test: 'true'
}

let httpParams = new HttpParams();

Object.keys(params).forEach(k => {
  httpParams = httpParams.set(k, params[k]);
});

console.log(httpParams.get('test'));

Answer 3

试试这个：

let searchParams = new HttpParams();

for (const [k, v] of Object.entries(data)) {
  console.log(`${k}: ${v}`);
  if (v !== '' || v !== undefined) {
    searchParams = searchParams.append(k, v);
  }
}

动态设置HttpParams（）主体

3 个答案: