Angular HttpClient返回字符串数据而不是已解析的JSON

Question

我一直在将代码库从Angular 4.x迁移到5.x，并且遇到了一个奇怪的问题。我有一个服务功能，旨在将对象列表返回到前端，然后我将其整理成特定的数据格式。我知道我需要保留映射，但是我有点沮丧，它只返回纯字符串数据。

原始功能是这样的：（使用刚从@angular/http的Http重命名为HttpClient）

    public GetVendors(showAll = true, screenArea: number = 0): Observable<Array<SelectModel>> {
        let link = AppSettings.API_COMMON_VENDORS;
        let params: URLSearchParams = new URLSearchParams();
        params.set('showAll', showAll.toString());
        params.set('screenArea', screenArea.toString());

        let requestOptions = new RequestOptions();
        requestOptions.search = params;

        return this.httpClient.get(link, requestOptions).map(response => {
            let result = JSON.parse(response.json());
            let list = new Array<SelectModel>();
            let vendors: Array<any> = result;

            vendors.forEach(vendor => {
                list.push(this.CreateSelectModel(vendor));
            });

            return list;
        });
    }

并且剥去所有的Http代码之后，再次使用HttpClient中的@angular/common/http来实现此功能>

    public GetVendors(showAll = true, screenArea: number = 0): Observable<Array<SelectModel>> {
        let link = AppSettings.API_COMMON_VENDORS;
        let params: HttpParams = new HttpParams()
            .set('showAll', showAll.toString())
            .set('screenArea', screenArea.toString());

        return this.httpClient.get<Array<any>>(link, {params}).map(response => {
            let list = new Array<SelectModel>();

            response.forEach(vendor => {
                list.push(this.CreateSelectModel(vendor));
            });

            return list;
        });
    }
与此有关的问题是，这有点违反了新客户端为我解析json的目的。 response对象是一个字符串，代表我请求的数据的JSON，但仍为字符串形式，而不是get<>()调用中定义的类型。

我在这里做错了什么？它不应该已经解析了吗？

我一直在将代码库从Angular 4.x迁移到5.x，并且遇到了一个奇怪的问题。我有一个服务函数，旨在将对象列表返回到最前面...

Answer 1

Try like below 

 return this.http.get<Hero[]>(url)
      .pipe(
        map(heroes => heroes[0]), // returns a {0|1} element array
        tap(h => {
          const outcome = h ? `fetched` : `did not find`;
          this.log(`${outcome} hero id=${id}`);
        }),
        catchError(this.handleError<Hero>(`getHero id=${id}`))
      );