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

Tại sao điều này không hoạt động? Nó chỉ đặt 'aaa' chứ KHÔNG phải 'bbb'

Ngoài ra, tôi có một đối tượng {aaa: 111, bbb: 222} Làm cách nào để đặt tất cả các giá trị mà không lặp lại?

CẬP NHẬT (điều này có vẻ hiệu quả, nhưng làm cách nào để tránh vòng lặp?)

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

Trước 5.0.0-beta.6

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

Kể từ 5.0.0-beta.6

Kể từ phiên bản 5.0.0-beta.6 (2017-09-03), họ đã thêm tính năng mới (chấp nhận bản đồ đối tượng cho tiêu đề và thông số HttpClient)

Về phía trước, đối tượng có thể được truyền trực tiếp thay vì 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 được thiết kế để không thay đổi. Các phương thức setvà appendkhông sửa đổi phiên bản hiện có. Thay vào đó, chúng trả về các phiên bản mới với các thay đổi được áp dụng.

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

Cách tiếp cận này hoạt động tốt với chuỗi phương pháp:

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

... mặc dù điều đó có thể hơi khó xử nếu bạn cần kết hợp bất kỳ điều kiện nào trong số chúng.

Vòng lặp của bạn hoạt động vì bạn đang lấy một tham chiếu đến phiên bản mới được trả về. Mã bạn đã đăng không hoạt động, không. Nó chỉ gọi set () nhưng không lấy kết quả.

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

Trong các phiên bản gần đây hơn của @angular/common/http(5.0 trở lên, nhìn bề ngoài), bạn có thể sử dụng fromObjectphím của HttpParamsOptionsđể chuyển thẳng đối tượng vào:

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

Tuy nhiên, điều này chỉ chạy một forEachvòng dưới mui xe :

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

Đối với tôi, setphương pháp chuỗi là cách sạch sẽ nhất

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

Một vài lựa chọn thay thế dễ dàng

Không sử dụng HttpParamsđối tượng

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

this.http.post(url, body);

Sử dụng HttpParamscác đối tượng

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

this.http.post(url, body);

Một tùy chọn khác để làm điều đó là:

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

Vì lớp HTTP Params là không thay đổi, do đó bạn cần chuỗi phương thức thiết lập:

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

Sử dụng điều này, bạn có thể tránh được vòng lặp.

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

Hơn nữa, tôi khuyên bạn nên tạo chức năng toHttpParams trong dịch vụ thường được sử dụng của bạn. Vì vậy, bạn có thể gọi hàm để chuyển đổi đối tượng thành 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());
}

Cập nhật:

Kể từ phiên bản 5.0.0-beta.6 (2017-09-03), họ đã thêm tính năng mới ( chấp nhận bản đồ đối tượng cho tiêu đề và thông số HttpClient )

Về phía trước, đối tượng có thể được truyền trực tiếp thay vì HttpParams.

Đây là lý do khác nếu bạn đã sử dụng một chức năng phổ biến như toHttpParams đã đề cập ở trên, bạn có thể dễ dàng loại bỏ nó hoặc thực hiện thay đổi nếu cần.

Theo như tôi có thể thấy từ việc triển khai tại https://github.com/angular/angular/blob/master/packages/common/http/src/params.ts

Bạn phải cung cấp các giá trị một cách riêng biệt - Bạn không thể tránh vòng lặp của mình.

Cũng có một phương thức khởi tạo nhận một chuỗi làm tham số, nhưng nó ở dạng param=value&param2=value2nên không có thỏa thuận nào cho Bạn (trong cả hai trường hợp, bạn sẽ kết thúc bằng việc lặp đối tượng của mình).

Bạn luôn có thể báo cáo vấn đề / yêu cầu tính năng đối với góc cạnh, điều tôi thực sự khuyên: https://github.com/angular/angular/issues

Tái bút: Hãy nhớ về sự khác biệt giữa setvà appendcác phương pháp;)

Vì @MaciejTreder xác nhận rằng chúng tôi phải lặp lại, đây là trình bao bọc sẽ cho phép bạn thêm vào một tập hợp các tham số mặc định theo tùy chọn:

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

Bạn có thể sử dụng nó như vậy:

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

Lớp trợ giúp của tôi (ts) để chuyển đổi bất kỳ đối tượng dto phức tạp nào (không chỉ "từ điển chuỗi") sang 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

Chỉ muốn thêm điều đó nếu bạn muốn thêm một số tham số có cùng tên khóa, ví dụ: www.test.com/home?id=1&id=2

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

Sử dụng append, nếu bạn sử dụng set, nó sẽ ghi đè lên giá trị trước đó với cùng tên khóa.

Giải pháp này phù hợp với tôi,

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