Angular 4.3 - HttpClient 세트 매개변수

Angular 4.3 - HttpClient 세트 매개변수

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

왜 안 되는 거지?'aaa'만 설정하고 'bbb'는 설정하지 않습니다.

또한, 나는 목표가 있습니다.{ aaa: 111, bbb: 222 }루프 없이 모든 값을 설정하려면 어떻게 해야 합니까?

UPDATE (이것은 효과가 있는 것처럼 보이지만, 어떻게 루프를 피할 수 있습니까?)

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

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

5.0.0-베타.6 이전 버전

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

5.0.0-베타.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})
}

최신 버전의@angular/common/http(5.0 이상, 보기에는) 다음을 사용할 수 있습니다.fromObject키를 눌러 객체를 바로 전달합니다.

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

몇 가지 쉬운 대안

사용하지 않음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);

나로서는, 체인.set방법은 가장 깨끗한 방법입니다.

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

또 다른 방법은 다음과 같습니다.

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

HTTP Params 클래스는 불변이므로 집합 메소드를 연결해야 합니다.

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그래서 당신을 위한 거래는 없습니다 (두 경우 모두 당신은 당신의 객체를 반복하는 것으로 끝낼 것입니다).

언제든지 이슈/기능 요청을 각도별로 보고할 수 있습니다. https://github.com/angular/angular/issues .

PS: 다음의 차이점을 기억하십시오.set그리고.appendmethods;)가 .

appendAll 함수

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

export class BuildUrl {

    /**
     * append all params
     * @param args {unknown[]}
     * @returns {HttpParams}
     */
    static appendAll(...args: unknown[]): HttpParams {
        let params = new HttpParams();
        args.forEach(param => {
            Object.keys(param).forEach((key) => {
                params = params.append(key, param[key]);
            });
        });
        return params;
    }
}

우리가 서비스에서 어떻게 사용하는지.

getData( pag: PaginationRequest, description: string = ''): Observable<any> {
    const params = BuildUrl.appendAll(pag,
      { description },
    );
    return this.http.get(url, { params });
  }

복잡한 d를 객체("문자열 사전" 뿐만 아니라)로 HttpParams로 변환하는 도우미 클래스(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

예를 들어 www.test.com/home?id=1&id=2 과 같은 키 이름을 가진 여러 매개 변수를 추가하려는 경우 이 정보를 추가하려고 합니다.

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

append를 사용합니다. set을 사용하면 이전 값을 동일한 키 이름으로 덮어씁니다.

@Maciej 이후Treder는 루프해야 한다고 확인했습니다. 여기 기본 매개 변수 집합에 추가할 수 있는 래퍼가 있습니다.

    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

이 해결책은 나에게 효과가 있고,

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

set() 사용

세트의 각도 공식 문서에서()

set(param: string, value: string | number | boolean): HttpParams

HttpParams를 반환합니다.새로운 가치를 지닌 새로운 몸.

이제 몇 가지 매개 변수를 추가하는 방법을 살펴보겠습니다.

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

set() 메서드를 체인화하여 HTTPParams 개체를 구성하고 있습니다.그 이유는 HTTPParams가 불변하기 때문입니다.

설정 메서드를 호출할 때마다 새 값을 가진 새 HttpParams 개체가 반환됩니다.먼저 반환된 HttpParams 개체를 가져온 다음 추가 수정을 위해 사용해야 합니다.

그래서, 우리가 다음과 같이 하면, 그것은 작동하지 않습니다.

const params = new HttpParams(); // empty HttpParams object

params.set('aaa', '111'); // lost
params.set('bbb', "222"); // lost

우리는 단지 전화할 뿐입니다.set하지만 반환된 것을 보관하지 않습니다.HttpParams물건.따라서 마지막으로 빈 HttpParams 개체가 있을 것이며 설정할 두 개의 호출은 효과를 추가하지 못할 것입니다.효과를 거두기 위해서는 다음과 같은 조치가 필요합니다.

const params = new HttpParams(); // empty HttpParams object

params = params.set('aaa', '111'); // storing the returned HttpParams object, now **it has aaa**
params = params.set('bbb', "222"); // add another parameter and store it. so now **it has both aaa and bbb**

---

fromString 사용

fromString을 사용하여 httpParams를 만들 수도 있습니다.쿼리 매개 변수 문자열이 이미 준비되어 있을 때 유용합니다.다음 구문을 사용하여 수행할 수 있습니다.

const params = new HttpParams({
  fromString: 'aaa=111&bbb=222'
});

앵귤러

이 방법은 Angular 14에서 잘 작동합니다.을 사용하여 변수 전달HttpParams

get<T>(path: string): Observable<T> {
    let httpParams = new HttpParams();
    httpParams = httpParams.append("language", "en");
    httpParams = httpParams.append("pageNo", 1);
    httpParams = httpParams.append("pageSize", 10);

    const options = { params: httpParams };

    return this.http.get<T>(`${this.apiUrl}/${path}`, options);
}

// T is a generic type returned by the `get` method.

언급URL : https://stackoverflow.com/questions/45210406/angular-4-3-httpclient-set-params