कोणीय 4.3 - HttpClient सेट परमेस

Question 1

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

यह काम क्यों नहीं करता है? इसने केवल 'आआ' और न कि 'बब्ब' सेट किया

इसके अलावा, मेरे पास एक ऑब्जेक्ट {aaa: 111, bbb: 222} है, मैं बिना लूपिंग के सभी मान कैसे सेट कर सकता हूं?

अद्यतन (यह काम करने लगता है, लेकिन लूप से कैसे बचा जा सकता है?)

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

Question 2

5.0.0-बीटा 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})
}

Question 3

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');

... हालांकि यह अजीब हो सकता है अगर आपको उनमें से किसी को भी शर्तों में लपेटने की आवश्यकता हो।

आपका लूप काम करता है क्योंकि आप लौटाए गए नए इंस्टेंस का संदर्भ ले रहे हैं। आपके द्वारा पोस्ट किया गया कोड काम नहीं करता है। यह बस सेट () कहता है, लेकिन परिणाम को नहीं पकड़ता है।

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

Question 4

हाल के संस्करणों में @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]);
});

Question 5

मेरे लिए, setतरीकों का पीछा करना सबसे साफ तरीका है

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

Question 6

आसान विकल्प के युगल

`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);

Question 7

एक अन्य विकल्प यह है:

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

Question 8

चूंकि HTTP Params वर्ग अपरिवर्तनीय है, इसलिए आपको सेट विधि की श्रृंखला बनाने की आवश्यकता है:

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

Question 9

इसके इस्तेमाल से आप लूप से बच सकते हैं।

// 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 के बजाय सीधे पास किया जा सकता है।

यह दूसरा कारण है कि अगर आपने ऊपर वर्णित किसी भी सामान्य फ़ंक्शन जैसे कि HttpParams का उपयोग किया है, तो आप इसे आसानी से हटा सकते हैं या आवश्यकता के अनुसार परिवर्तन कर सकते हैं।

Question 10

जहाँ तक मैं इसे https://github.com/angular/angular/blob/master/packages/common/http/src/params.ts पर कार्यान्वयन से देख सकता हूँ

आपको अलग से मान प्रदान करने होंगे - आप अपने पाश से बचने में सक्षम नहीं हैं।

एक कंस्ट्रक्टर भी है जो एक पैरामीटर के रूप में एक स्ट्रिंग लेता है, लेकिन यह फॉर्म में है param=value&param2=value2 इसलिए आपके लिए कोई सौदा नहीं है (दोनों मामलों में आप अपनी वस्तु को लूपिंग के साथ समाप्त करेंगे)।

आप हमेशा एक मुद्दे / सुविधा अनुरोध को कोणीय रिपोर्ट कर सकते हैं, जो मैं दृढ़ता से सलाह देता हूं: https://github.com/angular/angular/issues

पुनश्च: के बीच अंतर setऔर appendविधियों के बारे में याद रखें ;)

Question 11

चूंकि @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

Question 12

किसी भी जटिल dto ऑब्जेक्ट (न केवल "स्ट्रिंग शब्दकोश") को परिवर्तित करने के लिए मेरा सहायक वर्ग (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

Question 13

यदि आप उदाहरण के लिए एक ही कुंजी नाम के साथ कई पैरामीटर जोड़ना चाहते हैं, तो बस जोड़ना चाहते थे: www.test.com/home?id=1&hl=2

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

एपेंड का उपयोग करें, यदि आप सेट का उपयोग करते हैं, तो यह एक ही कुंजी नाम के साथ पिछले मूल्य को अधिलेखित कर देगा।

Question 14

यह समाधान मेरे लिए काम कर रहा है,

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