角度2如何从订阅返回数据答案

【问题标题】：angular 2 how to return data from subscribe角度2如何从订阅返回数据
【发布时间】：2017-01-10 18:34:23
【问题描述】：

这就是我想要做的。

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

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

如果在DataComponent 中调用了getData，您可以建议将其分配给this.data = res 之类的变量并使用我喜欢{{data}}。但我需要使用{{getData}} 之类的用于我自己的目的。请推荐我？

【问题讨论】：

标签： javascript angular typescript asynchronous

【解决方案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(...)，以便在数据从响应中到达时从可观察对象中调用。这就是为什么不能直接返回数据的原因，因为当someMethod()完成时，还没有收到数据。

【讨论】：

你有一个错字，第一个花括号应该在 "res =>" 部分之后，像这样：res => { return res; }
HI Neyxo，你能看看我的问题吗：*.com/questions/51551895/…

【解决方案2】：

我知道的两种方式：

export class SomeComponent implements OnInit
{
    public localVar:any;

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

一旦返回信息，这会将您的结果分配给局部变量，就像在承诺中一样。那你就做{{ localVar }}

另一种方法是将 observable 作为 localVariable。

export class SomeComponent
{
    public localVar:any;

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

通过这种方式，您可以在 html 中公开一个 observable，此时您可以使用 AsyncPipe {{ localVar | async }}

请尝试一下，让我知道它是否有效。另外，由于 Angular 2 很新，如果有什么问题，请随时发表评论。

希望对你有帮助

【讨论】：

这里真的很有趣@querty_igor 这种方式和Subject()有什么区别
如果我没记错的话，主题无论如何都是可观察的类型。它主要用于转发数据，然后您的服务或组件订阅它，但此时它是可观察的。所以 Subject()->next() -> asObserable()-> observable.subscribe()。有一段时间没有使用 angular 2 了。如果我错了，请纠正我。谢谢

【解决方案3】：

将这个存储在一个可以在订阅之外使用的变量中怎么样？

this.bindPlusService.getJSONCurrentRequestData(submission).map(data => {
    return delete JSON.parse(data)['$id'];
});

【讨论】：

【解决方案4】：

这种方式我用过很多次了...

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

使用 static 关键字并节省您的时间...在这里您可以使用静态变量或直接返回您想要的对象...希望它对您有所帮助...快乐编码...

【讨论】：