(Angular/Typescript) 不能使用变量来访问 JSON 对象答案

【问题标题】：(Angular/Typescript) can't use variable to access JSON object(Angular/Typescript) 不能使用变量来访问 JSON 对象
【发布时间】：2020-10-27 04:35:08
【问题描述】：

我现在很困惑。我想要完成的事情非常简单。我需要能够使用变量来访问特定的 JSON 对象。我创建了一个导入 JSON 文件的服务。然后应用程序组件使用此服务并调用函数 printData，该函数接受您想要访问的 JSON 对象键。这个问题最奇怪的部分是它在 stackblitz 上运行良好！

[点击查看stackblitz]https://stackblitz.com/edit/angular-json-related-project

我在两台本地机器上尝试了与上面完全相同的代码，我得到了同样的错误！

core.js:4081 ERROR TypeError: Cannot read property 'name' of undefined
    at DataServiceService.printData (data-service.service.ts:10)
    at new AppComponent (app.component.ts:13)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:14)
    at getNodeInjectable (core.js:3913)
    at instantiateRootComponent (core.js:7837)
    at createRootComponent (core.js:18351)
    at ComponentFactory$1.create (core.js:22287)
    at ApplicationRef.bootstrap (core.js:28020)
    at core.js:27731
    at Array.forEach (<anonymous>)

我觉得奇怪的另一件事是这会起作用

printData() {
    console.log(data['movies'].name);
}

但这不会

printData() {
    var objectName = 'movies';
    console.log(data[objectName].name);
}

我已经在项目本地添加了 "resolveJsonModule": true 和 "esModuleInterop": true 。如果有人可以帮助我，我将不胜感激。

【问题讨论】：

在本地，当您输入 console.log(data) 时，控制台会打印什么？
Hello Gustavo 这是我输入 console.log(data) i.ibb.co/FWLgSZV/console.png时控制台中显示的内容的图像
如图所示，'movies' 数组位于名为 default 的变量中，该变量位于名为 Module 的变量中，这就是为什么当您调用 data[objectName].name 时，会发生错误...
那么我将如何访问它呢？我似乎找不到方法。
data['default']['movies'].name 或 data.default.movies.name 应该可以工作。

标签： javascript json angular typescript

【解决方案1】：

printData() {
  var objectName = 'movies';
  console.log(data.default[objectName].name); //or data['default'][objectName].name
}

模块是一种特殊类型的对象，如果您对导入的模块进行控制台操作，您将看到实际值包含在 default 键中。

console.log(data)

输出 = Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}

但是，如果您直接使用字符串访问值，则不需要使用默认键：

printData() {
  console.log(data['movies'].name);
}

【讨论】：