Angular Observable-从响应中获取价值

时间:2019-06-05 01:31:12

标签: angular typescript observable

我刚开始使用Angular Observable对象,并尝试调用后端Web服务,并根据返回的响应构建对象列表。

响应如下:

{
  "success": true,
  "msg": [
    {
        "type": "SUCCESS",
        "message": "Successfully retrieved BoM Master info.",
        "title": "SUCCESS",
        "userVisible": true
    }
  ],
  "data": [
    {
        "pKey": {
            "winetype": "BFB200CAL",
            "validOn": "05/16/2017"
        },
        "wineTypeDesc": "MUSC/BAR BBLY",
        ...
    }
  ]
}

我有一个类映射到“数据”数组中对象的格式。

服务类别为:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { BomMasterSpec } from './bom-master-spec.model';
import { environment } from '../../environments/environment';

@Injectable()
export class BomMasterSpecsService {
  private url = `${environment.webServiceBaseURL}/BomMasterSpecs/Active/11-22-2017`;

  constructor(private http: HttpClient) {}

  public getMasterSpecs(): Observable<BomMasterSpec[]> {
    return this.http.get<BomMasterSpec[]>(this.url);
  }
}

我在服务中遇到的问题,我无法弄清楚如何从服务器返回的响应中提取“数据”数组并将其映射到“ BomMasterSpec”对象数组。我相信我需要使用.pipe(map())类型的调用,但是到目前为止我尝试过的所有操作都没有成功。

任何人都可以提供一个示例吗?

1 个答案:

答案 0 :(得分:1)

您可以将可观察对象返回的数据转换为

return this.http.get<BomMasterSpec[]>.pipe(map(res => res.data as BomMasterSpec[]));

您可以在https://stackblitz.com/edit/angular-transform-observable上看到这一点

如果您对具有状态等属性的所有服务调用始终使用相同的外部框架,则应考虑创建可根据所调用的服务方法进行类型转换的通用数据类型。