3

Tengo un servicio declarado en angular con el método getSomeData() en la que recojo datos de un json tal que así:

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import { HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import "rxjs/add/operator/map";
import "rxjs/add/operator/filter";

@Injectable()
export class GetDataService {

  constructor(private http: Http) { }

  getSomeData() {
    return this.http.get("dataTable.json")
    .map(res => res.json());
  }
}

En el componente tengo una variable data : any; para pintar los datos en el template.

Al llamar al subscribirse al servicio en el componente con una función normal de javascript tal que así, no me muestra los datos con la respuesta.

ngOnInit():void {
   this._service.getSomeData().subscribe(
        function(response) { this.data = JSON.stringify(response) },
        function(error) { console.log("Error happened" + error)},
        function() { console.log("the subscription is completed")}
   );
}

Sin embargo si llamo al método subscribe con una Arrow Function si me pinta los datos:

 ngOnInit():void {
    this._service.getSomeData().subscribe(
          response=>{
           this.data = JSON.stringify(response);
          }
          err=>{
              console.log("Error happened" + error)
          }
    );
 }

Pienso que es un tema de asincronia ya que con funciones normales no le da tiempo a pintar los datos.

1 respuesta 1

8

La diferencia entre una función flecha (arrow function) y una normal es el contexto: En las funciones clásicas el contexto se define al llamarlas y en las funciones flechas se define al declararlas. Nada mejor que un ejemplo para verlo claro:

(function() {

this.b="otra cosa";
this.a="una cosa"

function MiClase() {
  this.a="hola";
  this.b="adios";
}

let obj= new MiClase();
let getA=function () {
  return this.a;
};

obj.getA=getA;

let getB=() => this.b;
obj.getB=getB;

console.log(getA());
console.log(getB());

console.log(obj.getA());
console.log(obj.getB());

})();

Explicación: getA es una función normal, por tanto si se llama como a una función, this es el contexto en el que se llama, pero si se llama como método, this es el objeto al que pertenece el método.

En cambio, getB es una función flecha, por tanto this siempre es el contexto en el que fue declarada.

En tu caso, como tus funciones se declaran cuando el contexto es tu clase GetDataService, this apuntará al la instancia de GetDataService, mientras que las funciones tradicionales this será el contexto del observable, con lo que this.data no se puede asignar porque no existe.

¿Cómo hacer que las funciones "clásicas" funcionen en este escenario? Hay dos soluciones:

//por defecto el contexto es el objeto global (window)
console.log(this===window);

window.test="esto es un test";

let obj={
  test: "Atributo de obj"
}

function getTest1(){
  return this.test;
}

let self=this;
function getTest2(){
//closure (clausura): hemos guardado el contexto en una variable accesible por la función
  return self.test;
}



obj.test1=getTest1;
obj.test2=getTest2;
obj.test3=getTest1.bind(window);
//bind devuelve una función con el contexto fijado al parámetro que se le pase

console.log(obj.test1());
console.log(obj.test2());
console.log(obj.test3());

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.