导入本地JSON文件时无法读取未定义的属性 - Angular / Ionic

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (78)

我想在来自本地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)时,它会记录我的对象。

有任何想法吗?谢谢

提问于
用户回答回答于

{{ 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编译不允许这样做。

扫码关注云+社区

领取腾讯云代金券