Angular 在嵌套对象中循环并显示数据

仍然不清楚如何显示或遍历对象。这是我的目标：

Row{
id: 1,
    widget:{
       name: 'bla bla',
       location:{
             top: 255, right: 0, bottom :0, left: 0;
       }
    }
    location:{
       top: 255, right: 0, bottom :0, left: 0;
    }
}

这是HTML

行{{ROW}}{ROW.location | json} 我想将对象中的row.location.top放入样式内联。对于row.location | JSON输出，我得到：

---

但是如果我做{{row.location.top | json}}，我得到的是空的。

从下图可以看出，location也是一个数组，其中只有一个对象。因此，您可以尝试使用数组[0]访问top属性，即。 行。位置[0]。顶部。我想这应该行得通。

---

为什么不在元素中只显示[ngStyle]=row.location？我可以，这是一个很好的建议，但也厌倦了在对象周围乱搞，我想学习如何显示数据，因为我只需要显示一个属性。我尝试了[ngStyle]=row.location，输出正常，这就是应该发生的事情。请注意，您需要255px而不是255这样的样式才能有效。我猜根据开发工具快照，位置是一个数组。请尝试row.location[0].top并检查是否得到正确的结果，好吗？row.location[0].top输出数据，但是如果我要执行内联CSS，应该如何执行？它认为[style.padding]=行。位置[0]。顶行。位置[0]。右行。位置[0]。底行。位置[0]。左行应该可以工作，但没有任何作用。请参考此示例忽略以下代码的格式，因为注释中不允许任何格式：currentStyles:{}；setCurrentStyles{//CSS styles:根据组件属性的当前状态设置this.currentStyles={'font style'：this.canSave？'italic'：'normal'，'font weight'：！this.isUnchanged？'bold'：'normal'，'font size'：this.isSpecial？'24px'：'12px'}；}此div最初为斜体，正常重量，还有超大的24px。