Angular2：Http.get<Object[]> 地图未定义

Question

我有一个定义了这些导入的服务：

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";
import { Subject } from "rxjs/Subject";
import { Navigation } from "../Shared/app.home";
import { Module } from "../Shared/app.home";

然后在服务中我定义了一个方法：

getNavigationModules(): Observable<Navigation[]> {
    return this.http.get<Module[]>("/api/modules/getuserpreferences").map((mods) => {
        return mods.map(m => {
            var nav = new Navigation();
            nav.id = m.Id;
            nav.name = m.Name;
            nav.isFavorite = m.IsFavorite;
            nav.url = m.FriendlyUrl;
            nav.status = (m.ModuleProperties["Status"] != null && m.ModuleProperties["Status"] === "Online") ? "on" : "off" ;
            nav.type = m.Type;

            return nav;
        });
    });
}

当调用该方法时，我收到地图未定义的错误。调用 mods.map 时，我假设通过调用 http.get mods 将是一个模块数组，但是当我使用调试器 (Chrome) 时，我看到调试器将 mods 视为一个带有属性个模块，这个是模块数组。

但是如果我将代码更改为 mods.Modules.map 我在编译时会出错，因为 mods 实际上是一个 Module[] 而不是一个对象。

我错过了什么？

谢谢

Answer 1

你告诉 TypeScript 后端将发回的是一个 Module 数组。但事实并非如此。它是一个对象，有一个字段名为Modules，是一个Module数组。所以告诉 TypeScript 正确的事情：

getNavigationModules(): Observable<Navigation[]> {
    return this.http.get<{Modules: Module[];}>("/api/modules/getuserpreferences").map((mods) => {
        return mods.Modules.map(m => {
            var nav = new Navigation();
            nav.id = m.Id;
            nav.name = m.Name;
            nav.isFavorite = m.IsFavorite;
            nav.url = m.FriendlyUrl;
            nav.status = (m.ModuleProperties["Status"] != null && m.ModuleProperties["Status"] === "Online") ? "on" : "off" ;
            nav.type = m.Type;

            return nav;
        });
    });
}

Angular2：Http.get<Object[]> 地图未定义

Angular2: Http.get<Object[]> map undefined

angular

angular2-services

http-get