导入本地JSON文件时无法读取未定义的属性- Angular/Ionic
导入本地JSON文件时无法读取未定义的属性- Angular/Ionic
提问于 2019-03-15 04:12:29
我想要显示来自本地json文件的html文件中的数据。
我的JSON看起来像这样：
{
"ACCESSIBILITY_EXPANDED": "Expanded",
"ACCESSIBILITY_BACK": "Back",
"ACCESSIBILITY_COLLAPSED": "Collapsed",
"ACCESSIBILITY_PHONE_NUMBER": "Call us at",
"ACCESSIBILITY_EMAIL": "Email us at",
"ACCESSIBILITY_ADDRESS": "Visit us at",
"ACCESSIBILITY_FAX": "Send us a FAX at",
}到目前为止，我所做的是将我的tsconfig.json更改为如下所示：
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types",
"src/typings.d.ts"
],
"lib": [
"es2018",
"dom"
],
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
}
}在src文件夹中添加了一个名为typings.d.ts的文件，如下所示：
declare module "*.json" {
const value: any;
export default value;
}然后在我的组件的.ts文件中我这样做了。
import en from '../../assets/i18n/en.json';
但是在我的html文件中，当我做了类似这样的事情时
<span class="bolded"> {{ en.ACCESSIBILITY_BACK }}</span> 我收到一个错误，说无法读取未定义的属性ACCESSIBILITY_BACK。当我在ngOnInit()中使用console.log(en)时，它可以很好地记录我的对象。
有什么想法吗？谢谢
回答 1
Stack Overflow用户
发布于 2019-03-15 04:18:28
{{ en }}是一个模板属性，因此您需要将其分配给一个组件属性：
@Component({
template: '...<span class="bolded"> {{ en.ACCESSIBILITY_BACK }}</span>...'
})
export class A11yComponent {
// assigns `en` from json to a component property `en`
en = en;
}您也可以在模板字符串/连接中使用插值，但AoT编译不允许这样做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55171231
复制相关文章
相似问题