Question

在运行应用程序时，我在constants.ts声明（将json文件数据分配给常量变量）的声明中出错。

我在json文件中声明了一些数据，例如object.json.

{
 "furniture": {
     "tb": {
         "value": "table",
         "display": "Table(s)"
      },
      "ch": {
        "value": "chair",
        "display": "Chair(s)"
     }
 },
 "furnitureTypes": [
    {
     "value": "LivingRoomSofa",
     "display": "Living Room Sofa"
    },
    {
     "value": "CoffeeTable",
     "display": "Coffee Table"
    },
   {
    "value": "AccentCabinet",
    "display": "Accent Cabinet"
   }
 ],
"boardes": [
      {
       "value": null,
       "display": "--"
      },
      {
       "value": "Blockboard",
       "display": "Block board"
      },
      {
       "value": "Foamboard",
       "display": "Foam board"
      },
      {
       "value": "Fiberboard",
       "display": "Fiber board"
      }
  ]
}

接下来，我在导入上述json文件时创建了一个constants.ts文件。

import * as objData from './objects.json';

在constants.ts文件中

import * as objData from './objects.json';

const obj = <any>objData;

console.log('obj---:',obj);

export const Constants = { farr : [obj.furniture.tb, obj.furniture.ch]; }

运行项目，我得到了错误。

无法读取Module ../ src / app / shared / constants.ts中未定义的属性'tb'

这是显示的控制台日志：

obj--模块{默认：{…}，__esModule：true，Symbol（Symbol.toStringTag）：“ Module”}

为什么会得到Module并添加了default键，但实际上却显示了直接的json object data。

说的是：我需要这样显示json object。

json-obj----------: 
  {farr: Array(2),furnitureTypes: Array(3), boardes: Array(4), …}
   boardes: (4) [{…}, {…}, {…}, {…}]
  farr: (2) [{…}, {…}]
  furniture: {tb: {…}, ch: {…}}
  furnitureTypes: (3) [{…}, {…}, {…}]
  __proto__: Object

在这里，我可以像obj.tarr.a and obj.tripTypes[0]这样直接访问

但是在我的情况下，在控制台日志中显示如下：

obj---: 
 Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 
 "Module"}
default:
   boardes: (4) [{…}, {…}, {…}, {…}]
   furniture: {tb: {…}, ch: {…}}
   furnitureTypes: (3) [{…}, {…}, {…}]
   __proto__: Object
   Symbol(Symbol.toStringTag): "Module"
   __esModule: true

此处显示的是Module而不是Object。

我如何以Object的身份获得它？

有人可以帮我解决问题吗？

Answer 1

首先，您需要创建扩展名为 .ts （example.ts）的文件名，并在该 example.ts 文件中

export default {
  "furniture": {
    "tb": {
      "value": "tables",
      "display": "Table(s)"
    },
    "ch": {
      "value": "chairs",
      "display": "Chair(s)"
    }
  }
}

，您需要将此文件导入组件中

import obj from './example';

Live Demo

它将按您的期望

未捕获的TypeError：无法读取未定义的属性'tb'

1 个答案: