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，該mod將是一個Module數組，但是當我使用調試器（Chrome）時，我看到調試器將mods視為具有Modules屬性的Object，這就是Module數組。

但是，如果我將代碼更改為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;
        });
    });
}