Question

我正在开发一个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

但是althogh这种方式在控制器中起作用，它在HTML中不起作用。 'jvm.memory.total.used'属性不是唯一一个在其名称中包含点的属性。你们有没有看到任何可能的原因发生这种情况？或者任何解决方法？

谢谢

Answer 1

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

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

或

{{metrics?.gauges['jvm.memory.total.used]'}}

Answer 2

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

当前问题中的

jvm.memory.total.used不是有效的属性名称，因此访问的唯一方法是 -

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

你必须提供有效的属性名称，这是解决它的唯一方法。

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

原因

当您在模板中使用jvm.memory.total.used时，它实际上将其视为

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

但实际上并不存在，因此无法显示。

Answer 3

您始终可以为组件类中的属性创建一个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'];
   }
}

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

3 个答案: