Angular 4 投射http响应的正确方法

2024-07-03

我在 Angular 4 中创建了一个服务,并使用以下代码通过 REST/JSON(Angular 的新功能)获取数据:

界面

export interface IItem {
    Id: number;
    Title: string;
}

Service

import { IItem } from './item';
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

@Injectable()
export class ItemTest {

    constructor(private _http: HttpClient) {}

    getItems(): Observable<IItem[]> {
        return this._http.get<IItem[]>('url')
            .do(data => {
                console.log(data);
            })
    }
}

如果响应采用这种格式,则 http 转换为 IITem 可以正常工作

[
    {
        "Id": 53,
        "Title": "Test Document 4.docx"
    },
    {
        "Id": 55,
        "Title": "Test Document 2.docx"
    }
]

但服务器的实际响应看起来像这样,并且转换不起作用。将响应的“结果”部分转换为 IItem 数组的最佳方法是什么?

{
    "d": {
        "results": [
            {
                "Id": 53,
                "Title": "Test Document 4.docx"
            },
            {
                "Id": 55,
                "Title": "Test Document 2.docx"
            }
        ]
    }
}

get 的特定类型应该描述您期望收到的实际响应 JSON 的形状。然后编译器可以实际上帮助你告诉您是否正在访问和返回正确的内容。在你的情况下:

getItems(): Observable<IItem[]> {
    return this._http.get<{ d: { results: IItem[] } }>('url')
        .map(response => response.d.results)
        .do(data => {
            console.log(data);
        }):
}

请注意,这些都不是casting响应数据,只是描述 it.


至于你的其他建议:

.get<IItem[]>(...)
.map((data) => data['d']['results']) 

如果您要错误地断言响应的类型,那么进行不安全的属性访问,编译器只能假设是any,您可能根本不使用类型。当编译器告诉您正在访问错误的属性时,不要只是忽略它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 4 投射http响应的正确方法 的相关文章

随机推荐

  • 如何增加 IntelliJ IDEA 上的内存堆大小?

    我想分配大约 1GB 的堆大小 但我似乎无法弄清楚 这个怎么做 Use Help 编辑自定义虚拟机选项 右侧会自动打开一个编辑器 vmoptions文件 调整值 Xmx 保存并重启IntelliJ IDEA 查看 IntelliJ IDEA
  • 为简单的 hadoop mapreduce 作业运行两个映射器和两个减速器

    我只是想更好地了解如何使用多个映射器和化简器 我想使用一个简单的 hadoop mapreduce 字数统计作业来尝试一下 我想为这个字数统计作业运行两个映射器和两个化简器 我是否需要这样做在配置文件上手动配置 或者仅对 WordCount
  • 为简单的 hadoop mapreduce 作业运行两个映射器和两个减速器

    我只是想更好地了解如何使用多个映射器和化简器 我想使用一个简单的 hadoop mapreduce 字数统计作业来尝试一下 我想为这个字数统计作业运行两个映射器和两个化简器 我是否需要这样做在配置文件上手动配置 或者仅对 WordCount
  • React Native 应用程序 - 在 Android 8 真实设备上启动时崩溃/关闭

    我有一个 React Native 项目 不是 Expo 初始化为react native init myapp 我可以在装有 Android 5 的模拟器和真实设备上运行此应用程序 但无法在装有 Android 8 的 Android 手
  • React Native 应用程序 - 在 Android 8 真实设备上启动时崩溃/关闭

    我有一个 React Native 项目 不是 Expo 初始化为react native init myapp 我可以在装有 Android 5 的模拟器和真实设备上运行此应用程序 但无法在装有 Android 8 的 Android 手
  • 是否可以导出为 CSV 并让标题包含空格?

    我需要将 SSRS 2005 报告导出为 CSV 其中列标题包含空格 目前 CSV 标题列标题源自 textBox 属性名称 并使用下划线而不是空格 还有其他更好的方法吗 例如 目前我有 SSRS 报告标题 生效日期 文本框名称 生效日期
  • 是否可以导出为 CSV 并让标题包含空格?

    我需要将 SSRS 2005 报告导出为 CSV 其中列标题包含空格 目前 CSV 标题列标题源自 textBox 属性名称 并使用下划线而不是空格 还有其他更好的方法吗 例如 目前我有 SSRS 报告标题 生效日期 文本框名称 生效日期
  • 小数可以表示的第二个最小值是多少?

    什么是第二个最小值值一个decimal可以代表吗 该值大于Decimal MinValue并且小于任何其他值decimal可以代表 在C 中如何获取这个值 谢谢 第二个最小值是Decimal MinValue 1 这可以从文档中推断出dec
  • 小数可以表示的第二个最小值是多少?

    什么是第二个最小值值一个decimal可以代表吗 该值大于Decimal MinValue并且小于任何其他值decimal可以代表 在C 中如何获取这个值 谢谢 第二个最小值是Decimal MinValue 1 这可以从文档中推断出dec
  • 让qmake默认使用qt5

    我的 Linux 系统上有 qt4 和 qt5 默认使用qt4 有什么干净的方法可以改变它 以便 qmake 默认使用 qmake qt5 系统可能有不同的元包来处理默认值 例如在 Debian 上有一个qt4 default and a
  • 让qmake默认使用qt5

    我的 Linux 系统上有 qt4 和 qt5 默认使用qt4 有什么干净的方法可以改变它 以便 qmake 默认使用 qmake qt5 系统可能有不同的元包来处理默认值 例如在 Debian 上有一个qt4 default and a
  • 在 ember.js 中定义多分段 catch all 路由

    我正在使用 Ember js 我想创建一个捕获所有路由 以便在用户导航到与资源不匹配的 URL 时将其发送回应用程序的根目录 我正在使用历史API 我已经这样实现了 App Router map function this resource
  • 在 ember.js 中定义多分段 catch all 路由

    我正在使用 Ember js 我想创建一个捕获所有路由 以便在用户导航到与资源不匹配的 URL 时将其发送回应用程序的根目录 我正在使用历史API 我已经这样实现了 App Router map function this resource
  • 用于强制 .NET 应用程序以 32 位运行的环境变量

    有人告诉我 您可以设置一个环境变量来强制 NET 应用程序在 x64 版本的 Windows 上作为 32 位应用程序运行 你知道它是什么 或者知道它的参考资料吗 恐怕我的 google fu 今天让我失望了 或者它不存在 我正在使用 Re
  • 用于强制 .NET 应用程序以 32 位运行的环境变量

    有人告诉我 您可以设置一个环境变量来强制 NET 应用程序在 x64 版本的 Windows 上作为 32 位应用程序运行 你知道它是什么 或者知道它的参考资料吗 恐怕我的 google fu 今天让我失望了 或者它不存在 我正在使用 Re
  • 发出 axios get 请求时出现无限循环

    当我使用 Axios 向 api 发出 get 请求时 我在 useEffect 挂钩中遇到无限循环 并且我确信添加第二个选项 会告诉它只运行一次 有什么我遗漏或忽视的吗 console log 向我显示它正在无限循环 import Rea
  • 发出 axios get 请求时出现无限循环

    当我使用 Axios 向 api 发出 get 请求时 我在 useEffect 挂钩中遇到无限循环 并且我确信添加第二个选项 会告诉它只运行一次 有什么我遗漏或忽视的吗 console log 向我显示它正在无限循环 import Rea
  • Joomla 2.5 JFactory::getSession();似乎是在 Firefox 中缓存

    我的includes目录中有一个php文件 它的用途是显示验证码图像 在该文件中 我设置了一个会话变量 如下所示 code codegenerator session JFactory getSession session gt set s
  • Joomla 2.5 JFactory::getSession();似乎是在 Firefox 中缓存

    我的includes目录中有一个php文件 它的用途是显示验证码图像 在该文件中 我设置了一个会话变量 如下所示 code codegenerator session JFactory getSession session gt set s
  • Angular 4 投射http响应的正确方法

    我在 Angular 4 中创建了一个服务 并使用以下代码通过 REST JSON Angular 的新功能 获取数据 界面 export interface IItem Id number Title string Service imp