Angular 5中从本地文件到Typescript数组的JSON数组

尼基塔(Nikita Marinosyan)

我正在使用Angular 5开发Web应用程序。我有如下所示的JSON文件:

[
  {
        "id": 0,
        "title": "Some title"
  },
  {
        "id": 1,
        "title": "Some title"
  },
  ...
]

该文件存储在本地。我也有一个界面:

export interface Book {
  id: number;
  title: string;
}

问题是我该如何:

  1. 从文件中获取数据?
  2. Book[]从此数据创建类型数组
东尼19

您可以使用以下命令加载文件import

import data from 'path/to/data.json';

并将其分配给一个类型的数组Book[]

@Component({...})
class Foo {
   books: Book[] = data;
}

演示

还要在其中添加通配符模块定义src/typings.d.ts以告诉TypeScript编译器如何导入*.json

declare module "*.json" {
  const value: any;
  export default value;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将 JSON 文件从 Angular 6 中的给定 DTO 数组导出/导入到本地硬盘?

对象到 Angular 中的数组

Angular5中的声明类型数组-Typescript

如何自定义Typescript或Angular中的JSON数组

Angular 5 Service读取本地.json文件

在Typescript Angular 5中导入json文件

无法将对象数组存储到本地存储中(Angular 9)

在Angular 2 + TypeScript中深度复制数组

Angular/Typescript - 从数组服务中获取数据

TypeScript (Angular2+) 中的动态数组

覆盖Angular中的本地JSON文件

JSON 数组操作 Angular 5 打字稿

通过http请求打字稿angular 5从对象的json数组中检索对象的数组

如何比较JSON格式数组VALUE和KEY来创建新数组?在Angular 5中

如何从数组(本地存储)中的json对象获取特定数据-Angular 7

在Angular 2和Typescript中的数组内定义数组

在Angular 5中通过参考传递数组

检索重定向到本地主机的 JSON - Angular 5

替换 json 数组 - Angular

替换 json 数组 - Angular

将数组从json文件传递到angular自定义指令

深度嵌套json到Angular 2 * ngFor的array / json渲染中的数组

Angular 类中的数组数组

如何从对象 angular 5 数组的数组中检索值

如何在对象数组中显示特定对象(Angular 5,TypeScript)

无法迭代 Angular 6 中的本地对象数组?

从Angular的本地存储中获取所有数组

如何访问本身指向带有 Angular 的数组的 TypeScript 文件中的内部属性

如何在TypeScript Angular中将多个pdf文件保存在数组中?