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

Question

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

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

此文件存储在本地。我也有一个接口(interface):

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

问题是我如何:

1. 从文件中获取数据？
2. 根据这些数据创建类型为 Book[] 的数组？

Answer 1

您可以使用import 加载文件:

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

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

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

demo

同时添加一个wildcard module definition在 src/typings.d.ts 中告诉 TypeScript 编译器如何导入 *.json:

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