【问题标题】:Angular 2: http.get Response to StringAngular 2:http.get 对字符串的响应
【发布时间】:2017-02-16 19:28:07
【问题描述】:

核心问题:

我想将以下响应转换为字符串而不是 observable。

getFacebookPhoto(uid: string): Observable<any> {
    let results = this.http.get('https://graph.facebook.com/' + uid + '/picture?height=200&redirect=false')
    .map(response => response.json().data.url.)
    return results
}

附加信息:

我需要填充可用照片列表供我的用户选择。我将这些照片的 url 绑定到模板,并使用 {{ selectedPic }} 之类的插值。理想情况下,(click)="selectedPic = gravatarUrl" 之类的东西会将selectedPic 的值更改为gravatarUrl 的值,或者我的组件中具有url 字符串值的任何变量。

问题是facebookPhoto 是一个可观察的。我想将发射存储为字符串。

更新:

这样就达到了将发射存储在字符串类型变量selectedPic中的目的:

this.memberCreationService.getFacebookPicUrl(uid)
.subscribe(picUrl => this.selectedPic = picUrl)

但是,有没有办法在不创建订阅的情况下做到这一点?获得可观察的排放和处置的东西可能......

【问题讨论】:

    标签: angular rxjs angular2-observables


    【解决方案1】:

    在来自 '@angular/http' 的 angular2 的 Http 中。 http.get 总是会返回一个 Observable 对象,你可以在函数的签名中看到它:

    get(url: string, options?: RequestOptionsArgs): Observable<Response>;
    

    这是因为这个函数是异步运行的,如果你想从服务器获取数据,它必须等待,所以它不能马上返回你请求的字符串/json对象。

    你应该在函数调用之后使用它返回的.subscribe函数订阅observable,或者如果你导入了'rxjs/operator/add/toPromise'模块,则使用.toPromise()

    例如:

    getFacebookPhoto("abcd123").subscribe(response => {
        this.myObject = response.json();
    }
    

    我建议您阅读有关 Observables 或 Promises here.

    另外,您不需要在此处使用 {{}}:(click)="{{selectedPic = gravatarUrl}}"

    【讨论】:

    • 感谢各位的回复。我明白我必须订阅 observable。我要问的是,对可观察对象进行操作以将目标发射转换为字符串的最佳方法是什么。此外,模板语句中的大括号是错误的。
    • 这就是为什么我包含了第二个代码块,您可以看到如何使用您定义的函数。
    • 您的函数签名是getFacebookPhoto(uid: string): Observable&lt;any&gt; 要使用它,您可以在需要的地方订阅它并将 response.json() 传递给它。
    • 为了更正确一点,有一个选项可以实现您的要求,使用名为 async function 的 ES2017 功能您可以向下滚动并查看它并未得到广泛支持。
    【解决方案2】:

    不,您正在订阅该事件,并且数据在到达应用程序之前实际上是不存在的。

    Http 模块正在发出异步 Web 请求以获取数据,因此您需要订阅以在数据存在时收到通知(并采取一些措施,例如将数据分配给变量。

    订阅是必要的。

    【讨论】:

    • 您好,感谢您的回复。请参阅对 Omri Luzon 回答的评论。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-23
    • 1970-01-01
    • 2017-11-21
    • 1970-01-01
    • 2021-12-16
    相关资源
    最近更新 更多