meta tags angular 4

angular: respuesta del mapa HttpClient

Question

Actualmente estoy cambiando de http (@ angular / http) a HttpClient (@ angular / common / http) y tengo problemas para mapear mi respuesta a los objetos.

Código antiguo (estaba trabajando antes)

this.http.get(environment.baseUrl + ''/api/timeslots'')
            .map((response: Response) => {
                    const data = response.json();
                    const timeslots = Array.of<Timeslot>();
                    for (const item of data) {...}

Nuevo código, pero error de compilación:

this.httpClient.get(environment.baseUrl + ''/api/timeslots'')
                .map((response: Response) => {
                        const data = <Timeslot[]> response;
const timeslots = Array.of<Timeslot>();
                    for (const item of data) {...}

¿Echo de menos un reparto? La respuesta es una matriz de ranuras de tiempo.

Answer 1

Aún puede, pero necesita importar el operador map() desde rxjs como este:

import ''rxjs/add/operator/map'';

Y tendrás el operador map() .

(Véase también mi respuesta aquí: https://stackoverflow.com/a/48323851/348841 )

Answer 2

Desde Angular 6/7 ha habido un par de modificaciones a la implementación de la biblioteca RxJS dentro de Angular.

Por lo tanto, los operadores RxJS ahora están ubicados en ''rxjs / operator'' en lugar de ''rxjs / add / operator /: OperatorName''. Además, estos operadores ya no pueden ser encadenados directamente a la balanza de observación, sino que tienen que ser encadenados a través del método pipe ().

Entonces, la nueva forma de implementar esto debe verse así:

import {map} from ''rxjs/operators'';

this.http.get(...)
  .pipe(
    map( response => {
     // TODO: Do Your Staff Here! 
   } )
  );

Por favor, consulte la documentación específica de Angular here para obtener más detalles. * Aquí estoy asumiendo que su componente HttpClient está disponible bajo this.http prop. this.http .

Answer 3

El valor predeterminado que devuelve el nuevo HttpClient es Object. Llama automáticamente response.json() internamente.

Puede decirle a HttpClient de qué tipo será la respuesta, así que:

this.httpClient.get<Timeslot[]>(...)
 .map((timeSlots) => {
   ...

donde el tipo de timeSlots será Timeslot[]

Ver más información sobre mecanografía en el nuevo HttpClient

• https://angular.io/guide/http#typechecking-the-response