如何设计响应的打字稿模型?

2024-02-05

如何在得到以下响应的打字稿中设计我的模型?

{
    "data":[
            {
                "name": "XYZ",
                "id": "1"
            },
            {
                "name" :"Abc",
                "id": "2"
            }
        ]
}

我尝试了什么:

export class responseModel<T>{
    data:T;
}

export class model{
    name:string;
    id: number;
}

你的建议是什么?所有数据都将作为{ data: THE_DATA_OBJECT }

{
    data: []
}

getInfo(): Observable<responseModel<model[]>> {
    // API HTTP Call
}

类不适合声明表示 HTTP 响应的类型。使用接口或类型代替 https://stackoverflow.com/a/45405240/5695162因为 HTTP 请求产生的反序列化 JSON 值永远不会是类的实例

@Angular StyleGuide https://angular.io/guide/styleguide#interfaces
考虑使用 数据模型的接口。

export interface Model{
        id: number;
        name: string;
    }

export interface ResponseModel{
         data:Array<Model>;
  }

getInfo(): Observable<responseModel>{
return this._httpClient.get<resposneModel>('url);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何设计响应的打字稿模型? 的相关文章

  • 如何连接我的 angular2 应用程序 javascript 文件

    对于我的 Angular2 TypeScript 应用程序 我将所有 js 文件合并到一个 app min js 文件中 然后 System import 将此文件导入到我的 index html 页面 然后我得到一个同一模块文件中的多个匿
  • 由于 ngIf 语句,存储选择未运行

    我正忙于 MeteorJS 和 RxJS 它们正在退出 但有时也有点令人困惑 我当前的问题只是 Angular NgRx 问题 与 MeteorJS 无关 正如您在示例中看到的 有一个ngIf基于showChannels 该布尔值设置为fa
  • 重载签名、联合类型和“没有重载与此调用匹配”错误

    想象一个 TypeScript 4 2 2 函数接收一个string or a Promise
  • Chartjs + Angular6 未显示图表或任何错误

    我正在尝试以角度实现chart js 编写了一个简单的代码来在html上显示图表 但是页面上没有输出 也没有错误 我不明白问题出在哪里以及为什么显示图表失败 堆栈闪电战 https stackblitz com edit angularch
  • Angular 2 形式 + OnPush

    我正在编写一个 Angular 2 应用程序 出于性能原因 我尝试在任何地方使用 ChangeDetectionStrategy OnPush 我有一个复杂的组件 需要 OnPush 才能顺利工作 其中包含另一个显示表单的组件 使用 For
  • 组件没有路由配置 - 嵌套路由 angular2 RC1

    我有嵌套路线 Routes path component RootComponent path parent component ParentComponent 二级路由有参数 Routes path id component ChildC
  • 如何让热模块重新加载在打字稿 monorepo 中工作

    因此 在过去的几天里 我一直在尝试在基于 Typescript React Koa Mongo 的 monorepo 中进行热模块重新加载 但完全徒劳无功 我感觉我的头一直在撞砖墙 HMR 的文档少之又少 几乎互联网上的所有内容都只是par
  • TypeScript 中类和命名空间的区别

    到底有什么区别classes and namespaces在打字稿中 我知道 如果您创建一个带有静态方法的类 您可以在不实例化该类的情况下访问它们 这正是我猜想的命名空间的要点之一 我还知道你可以创建多个同名的命名空间 并且它们的方法在编译
  • Mat-table 多行内的多行

    我想要的内容如下图所示 我使用 Angular Material 7 x 并使用 Mat Table 实现 如下所述 https material angular io components table overview https mat
  • Angular + Material - 如何使用 formgroup 处理多个复选框

    我有一个从后端获得的兴趣列表 我希望用户能够选择他们想要的兴趣 我将只存储他们在数据库中检查的兴趣 并在他们加载页面时预先填充 但首先我需要获取用户选择的这些兴趣 兴趣组件 ts export class InterestsComponen
  • Angular 2 组件:子对子通信

    我的 Angular 2 应用程序中有三个组件 C0 C1 和 C2 第一个 C0 表示一个 html 模板 具有多个子组件 ui 元素 现在 如果有人点击C1 中的按钮 菜单 我怎样才能通知C2 日历 关于那件事 我尝试了一些例子组件通讯
  • Material UI 选择覆盖主题中的位置

    我想覆盖主题中选择字段下拉列表的位置 不必在每个选择上实现它 我尝试过 createMuiTheme overrides MuiSelect select MenuProps getContentAnchorEl null anchorOr
  • 如何将数组数据作为formdata Angular 4发送

    我尝试发布一组数据未发送到服务器 网络服务 deleteCategory return this http post http www demo webapi deletecategory headers Authorization Tok
  • Typescript 数组文字语法的差异

    Typescript 允许使用以下任一语法定义数组 var myStrArry1 string or var myStrArry1 Array
  • 如何安装旧版本的 Angular?

    我需要安装 Angular 2 但是当我运行时 ng new myApp版本是4 我搜索了很多 但找不到只安装版本2的方法 有谁知道该怎么做 Edit the command ng new MYAPP ng4 false It does n
  • 如何按顺序使用 RxJS 可观察量?

    事情是这样的 我有一个 HTTP get 请求 它返回一个 JSON 对象列表 我使用 RxJS 订阅接收该列表的数据 现在 对于该列表中的每个对象 我想执行另一个 HTTP 请求 然后将该请求的结果放入数组中 到目前为止 我已经能够做到这
  • 修改对象实例的 TypeScript 类装饰器

    我正在为 Aurelia 制作一个插件 需要一个类装饰器 将属性添加到新对象实例 并且 使用新对象作为参数调用外部函数 我已经查看了示例 到目前为止我已经将它们放在一起 伪 代码 return function addAndCall tar
  • 严格模式下不允许属性的多个定义 - Angular

    我在 IE 中的 Angular 6 项目中遇到了这个问题 这导致应用程序无法加载 它仅发生在应用程序的产品版本中 该版本由 Angular 连接和缩小 在 ngserve 下运行的本地开发版本并未导致该问题 此错误出现在 Chrome 开
  • AOT 编译器 - 包括延迟加载的外部模块

    我试图将外部模块 托管在 git npm 存储库中 作为延迟加载模块包含在我的 Angular 应用程序中 我正在使用 ngc 编译器编译我的外部模块 node modules bin ngc p tsconfig aot json 这是我
  • 如何为 Apollo 的 React HOC 定义 props 接口?

    我正在尝试使用 Apollo 的 React HOC 来获取数据并将其传递给我的组件 但出现以下错误 Argument of type typeof BrandList is not assignable to parameter of t

随机推荐