Question

我想要导入和循环浏览的Angular应用程序中有一个JSON转换文件“ ./countries/es.json”。

{
...
"Solomon Islands": "Islas Salomón",
"South Sudan": "Sudán del Sur",
...
}

我的"resolveJsonModule": true,文件中有tsconfig.json，因此通常导入很顺利。

import * as countries from './countries/es.json';

如果访问该对象，说countries['Solomon Islands']，则会得到正确的“ IslasSalomón”。

但是，如果要枚举所有国家/地区：

const countries_keys = Object.keys(countries);

countries_keys 是一个值为“ default”的数组。为了获取国家列表，我需要做：

const countries_keys = Object.keys(countries['default']);

我的问题-有一种方法可以干净地进行导入，以便我完全像JSON文件中那样获取对象？

如果我的源文件如下：

{
countries: {
    ...
    "Solomon Islands": "Islas Salomón",
    "South Sudan": "Sudán del Sur",
    ...
    }
}

我可以简单地做到：

import  { countries } from './countries/es.json';

但是有一种干净的方法可以将我的原始文件作为等效的JSON对象导入，而无需其他“默认”属性。

Answer 1

稍后导入不是一个好主意，如果要将文件移动到某些服务器，则需要重写整个逻辑，我建议在此处使用httpclient get调用。因此，将文件移动到资产文件夹，然后

constructor(private http:HttpClient){
this.http.get('assets/yourfilepath').subscribe(data=>{
   const countries_keys = Object.keys(data['countries']);
   console.log(data['countries'])//data is your json object here
})
}

Answer 2

您需要在allowSyntheticDefaultImports中添加tsconfig.json。

tsconfig.json

{
  "allowSyntheticDefaultImports": true,
  "resolveJsonModule": true
}

TS

import countries from './countries/es.json';

从JSON模块正确导入默认导出

2 个答案: