javascript method angular 2 como retornar dados da assinatura



typescript async function example (3)

Conheço duas maneiras:

export class SomeComponent implements OnInit
{
    public localVar:any;

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

Isso atribuirá seu resultado à variável local assim que as informações forem retornadas, como em uma promessa. Então você apenas faz {{ localVar }}

Outra maneira é obter uma variável observável como local.

export class SomeComponent
{
    public localVar:any;

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

Dessa forma, você está expondo um observável no momento em que pode fazer no seu html e usar o AsyncPipe {{ localVar | async }} {{ localVar | async }}

Experimente e deixe-me saber se funciona. Além disso, como o angular 2 é bastante novo, fique à vontade para comentar se algo estiver errado.

Espero que ajude

Isto é o que eu quero fazer.

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

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

Se getData foi chamado dentro do DataComponent , você pode sugeri-lo a uma variável como this.data = res e usar i like {{data}} .Mas eu precisava usar o {{getData}} para meu próprio {{getData}} . mim?


Answer #1

Você simplesmente não pode retornar o valor diretamente porque é uma chamada assíncrona. Uma chamada assíncrona significa que está sendo executada em segundo plano (realmente agendada para execução posterior) enquanto seu código continua sendo executado.

Você também não pode ter esse código diretamente na classe. Ele precisa ser movido para um método ou construtor.

O que você pode fazer é não se subscribe() diretamente, mas usar um operador como map()

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

Além disso, você pode combinar vários .map com os mesmos Observáveis, pois às vezes isso melhora a clareza do código e mantém as coisas separadas. Exemplo:

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

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

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

Dessa forma, um observável será retornado pelo qual o chamador pode se inscrever

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

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

O chamador também pode estar em outra classe. Aqui é apenas por uma questão de brevidade.

data => this.data = data

e

res => return res.json()

são funções de seta. Eles são semelhantes às funções normais. Essas funções são passadas para subscribe(...) ou map(...) para serem chamadas do observável quando os dados chegarem da resposta. É por isso que os dados não podem ser retornados diretamente, porque quando someMethod() é concluído, os dados ainda não foram recebidos.


Answer #2

Eu tenho usado muito tempo ...

@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;
}

use palavras-chave estáticas e economize seu tempo ... aqui você pode usar variáveis ​​estáticas ou retornar diretamente o objeto que deseja .... espero que ajude você .. codificação feliz ...





asynchronous