angular 2如何从订阅返回数据

Question

这就是我想要做的.

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

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

如果getData在里面调用DataComponent,你可以建议将它分配给变量,this.data = res并使用我喜欢{{data}}.但是我需要像{{getData}}我自己的目的一样使用.请建议我？

Answer 1

您无法直接返回该值,因为它是异步调用.异步调用意味着它在后台运行(实际安排在以后执行),同时代码继续执行.

您也不能直接在类中使用此类代码.它需要移动到方法或构造函数中.

你能做的不是subscribe()直接而是使用像这样的运营商map()

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

此外,您可以将多个.map与相同的Observable 组合在一起,因为这有时可以提高代码清晰度并使事物保持分离.例:

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

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

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

这样一个observable将返回调用者可以订阅

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

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

来电者也可以在另一个班级.这只是为了简洁起见.

data => this.data = data

和

res => return res.json()

是箭头功能.它们与普通功能类似.当数据从响应到达时,这些函数被传递给subscribe(...)或者map(...)从observable调用.这就是无法直接返回数据的原因,因为someMethod()完成后数据尚未收到.

Answer 2

我知道的两种方式:

export class SomeComponent implements OnInit
{
    public localVar:any;

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

一旦返回信息,就像在promise中一样,这会将结果分配给局部变量.然后你就做了{{ localVar }}

另一种方法是将一个observable作为localVariable.

export class SomeComponent
{
    public localVar:any;

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

你露出了观察到的这种方式,此时你可以在你的HTML做的是使用AsyncPipe {{ localVar | async }}

请试一试,让我知道它是否有效.此外,由于角度2是相当新的,如果出现问题,请随时发表评论.

希望能帮助到你