Question

我想在来自本地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文件夹中添加了一个名为Types.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）时，它会记录我的对象正常。

有什么想法吗？谢谢

Answer 1

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

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

1 个答案: