如何使用 @angular/http 返回字符串而不是 Observable答案

【问题标题】：How to return string instead of Observable with @angular/http如何使用 @angular/http 返回字符串而不是 Observable
【发布时间】：2018-05-05 19:01:11
【问题描述】：

我将 Angular 4 与 .net 核心 WEB API 挂钩。

Web API 正在根据传入的 Id 返回字符串中的 CustomerName。

这是 Angular 4 中的服务方法。我知道 angular/http 必须返回一个 Observable，因为它是一个异步调用。

但是我该如何返回一个字符串呢？或者如何从调用方法访问 Observable 对象中的数据？

    getCustomerName(id: number): Observable<any>{
return this._http.get(this.baseUrl + 'api/getCustomerName/' + id )
    .map((response: Response) => <any>response.json() )
    .catch(this.handleError);

}

【问题讨论】：

标签： angular observable

【解决方案1】：

要从 observable 访问数据，请在您的服务中返回您从 api 获得的响应，如下所示：

getCustomerName(id: number): Observable<any>{
     return this._http.get(this.baseUrl + 'api/getCustomerName/' + id );
   }

并在您的组件中调用服务的方法：

getCustomerName(id).subscribe(
   data => {
   console.log(JSON.parse(data));
},
error => {
   console.log(error);
});

【讨论】：

我收到此错误。 NodeInvocationException：JSON 中位置 0 的意外标记 R SyntaxError：JSON 中位置 0 的意外标记 R
仅控制台数据而不是在 JSON 中解析它并检查您在响应中得到了什么
如果我们不返回任何 JSON 对象，那么 Angular 会在 JSON.parse () 异常的位置 0 处的 JSON 中抛出一个 Unexpected 标记（任何字母）。
console.log(data) 有效...我得到了我的预期值。但是，订阅位不起作用...这是一个异步调用，因此分配给局部变量不会执行该代码。 var retval: ""; this.service.getCustomerName(value).subscribe( data => { console.log(data); // 这有效 retval = data; }, error => { console.log(error); });返回 retval； //此处未定义
您可以为此使用全局变量

【解决方案2】：

将此函数与地图运算符一起使用：

private extractData(res) {
    let body = res.json();  // If response is a JSON use json()
    if (body) {
        return body.data || body;
    } else {
        return {};
    }
}

在服务中使用地图如下：

return this.http.post(url, body, options)
        .map(this.extractData)

如果不是 json 则直接省略解析行

【讨论】：

不得不提一下，在组件中有一个函数调用服务中的另一个函数。所以它像组件函数 getData 会调用 service.getdata.subscribe(data=>console.log(data))
它真的有用吗？我收到错误消息， *Property 'map' 在类型 'Observable 上不存在