angular 2 cómo devolver datos de subscribe

Esto Es Lo Que Quiero Hacer.

@Component({
   selector: "data",
   template: "<h1>{{ getData() }}</h1>"
})

export class DataComponent{
    this.http.get(path).subscribe({
       res => return res;
    })
}

Si getData fue llamado dentro de DataComponent, Puede sugerir asignarlo a una variable como this.data = res y usar i like {{data}}.Pero necesitaba usar como {{getData}} para mi propio propósito.Por favor, me sugieren?

Author: Roham Rafii, 2016-09-02
Source

3 answers

Simplemente no puede devolver el valor directamente porque es una llamada asincrónica. Una llamada asincrónica significa que se está ejecutando en segundo plano (en realidad programada para una ejecución posterior) mientras su código continúa ejecutándose.

Tampoco puede tener dicho código en la clase directamente. Necesita ser movida a un método o al constructor.

Lo que puedes hacer no es subscribe() directamente sino usar un operador como map() 

export class DataComponent{
    someMethod() {
      return this.http.get(path).map(res => {
        return res.json();
      });
    }
}

Además, puede combinar múltiples .map con el mismo Observables como a veces esto mejora la claridad del código y mantiene las cosas separadas. Ejemplo:

validateResponse = (response) => validate(response);

parseJson = (json) => JSON.parse(json);

fetchUnits() {
    return this.http.get(requestUrl).map(this.validateResponse).map(this.parseJson);
}

De esta manera se devolverá un observable al que el llamante puede suscribirse

export class DataComponent{
    someMethod() {
      return this.http.get(path).map(res => {
        return res.json();
      });
    }

    otherMethod() {
      this.someMethod().subscribe(data => this.data = data);
    }
}

El llamante también puede estar en otra clase. Aquí es sólo por brevedad.

data => this.data = data

Y 

res => return res.json()

Son funciones de flecha. Son similares a las funciones normales. Estas funciones se pasan a subscribe(...) o map(...) para ser llamadas desde el observable cuando los datos llegan de la respuesta. Esta es la razón por la que los datos no se puede devolver directamente, porque cuando se completa someMethod(), los datos no se recibieron todavía.

 36
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-09 04:10:10

Dos maneras que conozco: 

export class SomeComponent implements OnInit
{
    public localVar:any;

    ngOnInit(){
        this.http.get(Path).map(res => res.json()).subscribe(res => this.localVar = res);
    }
}

Esto asignará su resultado a la variable local una vez que la información se devuelva al igual que en una promesa. Entonces solo tienes que hacer {{ localVar }}

Otra forma es obtener un observable como localVariable.

export class SomeComponent
{
    public localVar:any;

    constructor()
    {
        this.localVar = this.http.get(path).map(res => res.json());
    }
}

De esta manera estás exponiendo un observable en el que punto puedes hacer en tu html es usar AsyncPipe {{ localVar | async }}

Por favor, pruébelo y hágamelo saber si funciona. Además, dado que angular 2 es bastante nuevo, no dude en comentar si algo es Equivocada.

Espero que ayude

 4
Author: qwerty_igor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-04 03:27:03

He usado esta manera mucho tiempo ...

@Component({
   selector: "data",
   template: "<h1>{{ getData() }}</h1>"
})

export class DataComponent{
    this.http.get(path).subscribe({
       DataComponent.setSubscribeData(res);
    })
}


static subscribeData:any;
static setSubscribeData(data):any{
    DataComponent.subscribeData=data;
    return data;
}

Utilice la palabra clave estática y ahorre tiempo... aquí puede usar una variable estática o devolver directamente el objeto que desee.... espero que te ayude.. feliz codificación...

 0
Author: sajabhoj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-07 11:18:09