Javascript 从html访问名称上带有点的属性

我正在开发Angular 2网站，并试图显示从后端接收的对象中包含的信息，其结构如下：

{ version: 3.0.0, gauges:{ jvm.memory.total.used:{ value: 3546546 }}}

当试图在HTML中显示名称中带有点的属性时，会出现问题（即对象的名称）：

{{metrics.gauges.jvm.memory.total.used}

我也试过这样做：

metrics.gauges['jvm.memory.total.used'].value 

但是，尽管这种方式在控制器中有效，但在HTML中却不起作用。“jvm.memory.total.used”属性不是唯一一个名称中有点的属性。你们认为发生这种事有什么可能的原因吗？或者有什么办法解决这个问题

---

谢谢

我想您只需要使用安全导航（Elvis）操作符，这样Angular在数据尚未从服务器到达时尝试呈现绑定时不会抛出

{{metrics?.gauges.jvm.memory.total.used}}

或

如果属性名无效，则只能使用括号访问它 符号

在您当前的问题中，

jvm.memory.total.used

不是有效的属性名称，因此访问的唯一方法是-

gauges['jvm.memory.total.used']

您必须提供有效的属性名称，这是解决此问题的唯一方法

我发现你可以通过它来参考

原因

当您在模板中使用

jvm.memory.total.used时，它实际上将其视为

jvm = {
  memory: { 
   total: {
     used: 'anyvalue'
   }
  }
}

但这实际上并不存在，因此不会显示。
您可以始终在组件类中为属性创建一个getter，以克服此限制

@Component({
   selector: 'your-component',
   template: `<p>{{ jvmMemoryTotalUsed }}</p>`
})
export class YourComponent {
   private metrics = { version: 3.0.0, gauges:{ 'jvm.memory.total.used':{ value: 3546546 }}};

   get jvmMemoryTotalUsed() {
      // make null safe if value is fetched from server
      return this.metrics.gauges['jvm.memory.total.used'];
   }
}

@组件({
选择器：“您的组件”，
模板：`{{jvmMemoryTotalUsed}}
`
})
导出类组件{
私有度量={version:3.0.0，仪表：{'jvm.memory.total.used'：{value:3546546}}；
获取jvmMemoryTotalUsed（）{
//如果从服务器获取值，则使null安全
返回this.metrics.gauges['jvm.memory.total.used']；
}
}
您得到的确切错误是什么？在json中，您需要引用jvm.memory.total.usedt感谢您的响应。当我在控制器上使用括号符号时，一切正常。当我在HTML文件中使用它时，问题出现了：{{metrics.gauges['jvm.memory.total.used'].value}然后导航器将抛出错误：TypeError:UndefinedAdministry的Cannot read属性'jvm.memory.total.used'在Angulars解析器中可能是一个bug（或缺少功能）。@DavidG。您确定可以在模板中使用括号表示法吗？我不知道这仍然不起作用。安全导航功能是否集成在Typesript中，或者我是否必须使用任何额外的软件包？浏览器不断抛出相同的错误：TypeError:无法读取未定义的属性“jvm.memory.total.used”。如果属性不能为
null
或
undefined
，则不需要
？
。你能提供一个打捞器吗？这最终解决了问题。不过，我使用它的方式是正确的，因为我在控制器构造函数中将metrics属性初始化为空对象，所以问题是当我尝试访问“仪表”时。我只是把问号放在仪表后面。谢谢你，甘特。他说他有很多房子，名字里有点。然后他将不得不创造出那么多的获得者
@Component({
   selector: 'your-component',
   template: `<p>{{ jvmMemoryTotalUsed }}</p>`
})
export class YourComponent {
   private metrics = { version: 3.0.0, gauges:{ 'jvm.memory.total.used':{ value: 3546546 }}};

   get jvmMemoryTotalUsed() {
      // make null safe if value is fetched from server
      return this.metrics.gauges['jvm.memory.total.used'];
   }
}