curso - angular wikipedia

¿Por qué HttpParams no funciona en varias líneas en angular 4.3

Question

Desde Angular 4.3 introdujeron HttpClient en lugar de Http. en HttpClient no puedo usar URLSearchParams para el parámetro de consulta url. En lugar de URLSearchParams estoy usando HttpParams

Este trabajo

 var params = new HttpParams().append(''a'', ''1'').append(''b'', ''2'');

Pero por qué esto no funciona

var params = new HttpParams();
params.append(''a'', ''1'');
params.append(''b'', ''2'');

Answer 1

Desde la versión 5.0.0-beta.6 (2017-09-03) está disponible una nueva función ( aceptar mapa de objetos para encabezados y parámetros HttpClient ).

Ahora podemos pasar el objeto directamente en lugar de HttpParams :

const params = {
  ''a'': ''1'',
  ''b'': ''2''
};

this.http.get(''...'', { params })

o en lugar de HttpHeaders :

http.get(''/url'', {
   headers: {''My-Header'': ''header value''}
})

Answer 2

El nuevo cliente HTTP trabaja con un objeto de solicitud inmutable y todas sus partes HttpParams como HttpParams y HttpHeaders . Para comprender por qué, vea Por qué se solicita http y todas sus partes constitutivas, como HttpHeaders y HttpParams, son inmutables o lea el artículo Guía para expertos en interceptores y mecánica de HttpClient en Angular .

Es por eso que el método append combina los parámetros y devuelve la nueva instancia del objeto HttpParams combinado en cada llamada para append :

  /**
   * Construct a new body with an appended value for the given parameter name.
   */
  append(param: string, value: string): HttpParams { 
        return this.clone({param, value, op: ''a''}); 
  }

  private clone(update: Update): HttpParams {
    const clone = new HttpParams({encoder: this.encoder}); <-------
    clone.cloneFrom = this.cloneFrom || this;
    clone.updates = (this.updates || []).concat([update]);
    return clone;                                          <--------
  }

Así que aquí:

var params = new HttpParams().append(''a'', ''1'').append(''b'', ''2'');

el append con el parámetro b actualiza el objeto devuelto por el append con a parámetro.

Mientras con este enfoque

var params = new HttpParams();
params.append(''a'', ''1'');
params.append(''b'', ''2'');

el append siempre actualiza el estado inicial de los HttpParams y todas las operaciones de HttpParams intermedias ignoradas de manera efectiva.

Así que tienes que usar el valor devuelto anterior:

var params = new HttpParams();
params = params.append(''a'', ''1'');
params = params.append(''b'', ''2'');

O usa el atajo con fromObject :

let searchParams = new HttpParams({
    fromObject: {
        query: query,
        sort: sort,
        order: order
    }
});

const modified = req.clone({params: searchParams});

O use el método setParams en una solicitud directamente:

const modified = req.clone({setParams: {''query'': query, ''sort'': sort, ''order'': order}});

Además, desde la versión 5.1.x puede pasar el objeto directamente en lugar de una instancia de HttpParams:

const params = {
  ''a'': ''1'',
  ''b'': ''2''
};

this.http.get(''...'', { params })

Answer 3

En realidad, @Maximus hizo una buena explicación sobre la inmutabilidad del objeto HttpParams , y todo lo que necesita es simplemente reemplazar los params con su clon dentro del bucle.

Suponiendo que tiene cero a muchos params disponibles, almacenados en una matriz similar a la siguiente estructura:

"params": [
  {
    "key": "p1",
    "value": "v1"
  },
  {
    "key": "p2",
    "value": "v2"
  }
]

Y de acuerdo con la información anterior, la siguiente función auxiliar debería ayudar:

export const getHttpParams = (params: Array<any>): HttpParams => {
  let res = new HttpParams();

  for (const item of params)
    res = res.append(item.key, item.value);

  return res;
};

Uso

const backend = ''http://httpstat.us/200'';
const params = getHttpParams(backend.params);

return this.http.get(`${backend}`, { params });

¡Espero eso ayude!

Answer 4

He intentado todas las otras formas en este post, pero tuve poco éxito. Entonces estoy encadenando params en un singleton HttpParams y llamando a toString() para devolver un tipo de string . Luego puedo pasar eso a http.get() y todo parece estar funcionando bien para construir los parámetros de URL. Aquí está mi ng -v :

$ ng -v
    _                      _                 ____ _     ___
   / /   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ / | ''_ / / _` | | | | |/ _` | ''__|   | |   | |    | |
 / ___ /| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   /_/_| |_|/__, |/__,_|_|/__,_|_|       /____|_____|___|
           |___/
@angular/cli: 1.4.2
node: 8.5.0
os: linux x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

Aquí hay un ejemplo que está funcionando bien para mí:

// Simplified for example (I''m using Redux and won''t go into all that)
private downloadState = { requestType: ''Auction'', fileType: ''CSV'' };

getStuffFromApi(): Observable<any> {
    const { requestType, fileType } = this.downloadState;
    const apiRoot = ''http://www.example.com'';

    const params: string = new HttpParams()
        .set(''RequestType'', requestType)
        .set(''FileType'', fileType)
        .set(''AuctionType'', auctionType)
        .set(''BackorderDay'', backorderDay)
        .toString();

    return this.http.get(apiRoot, { params })
        .map(res => res.json())
        .catch(err => Observable.of(err.json()));

}

Answer 5

Para que esto funcione

var params = new HttpParams();
params.append(''a'', ''1'');
params.append(''b'', ''2'');

Esto tiene que ser cambiado a

var params = new HttpParams();
params = params.append(''a'', ''1'');
params = params.append(''b'', ''2'');

Se puede enlazar y agregar dinámicamente.