Не удается прочитать свойство undefined при импорте локального файла JSON - Angular / Ionic

Question

Я хочу отобразить данные в html-файле, поступающем из локального файла json.

Мой 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 моего компонента idid.

import en from '../../assets/i18n/en.json';

Однако в моем html-файле, когда я сделал что-то вроде

 <span class="bolded"> {{ en.ACCESSIBILITY_BACK }}</span> 

, я получил сообщение о невозможности прочитать свойство ACCESSIBILITY_BACK из undefined.Когда я console.log (en) в ngOnInit (), он регистрирует мой объект в порядке.

Есть идеи?Спасибо

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 сборник.