Question

我正在使用Angular 5开发一个Web应用程序。我有JSON文件，如下所示：

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

此文件存储在本地。我也有一个界面：

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

问题是我如何：

从文件中获取数据？
从此数据创建一个类型为Book[]的数组？

Answer 1

您可以使用import加载文件：

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

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

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

demo

在src/typings.d.ts中添加wildcard module definition，告诉TypeScript编译器如何导入*.json：

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

Answer 2

这个答案可以帮助某人，尽管它与 Typescript 4 有关。（Angular 5 支持 Typescript 2）。

示例 JSON 文件内容 (data.json)：

[
  {
    "Gender": "Male",
    "HeightCm": 171,
    "WeightKg": 96
  },
  {
    "Gender": "Male",
    "HeightCm": 161,
    "WeightKg": 85
  }
]

适当的 tsconfig.json 条目：

{
    "compilerOptions": {  
      "esModuleInterop": true
      "resolveJsonModule": true
    } 
}

将 JSON 内容读入 interface Person 的代码：

import data from './data.json';

interface Person{
    Gender: string,
    HeightCm: number,
    WeightKg: number
}

const personArray:Person[] = data as Person[];

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

2 个答案: