循环嵌套对象并显示数据

Question

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

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

<div *ngFor="let row of canvas; let r = index" >
    <div class="row" style="padding-top: row.location.top;">
        ROW {{row}}  {{ row.location | json}}
    </div>
</div>

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

但如果我做{{ row.location.top | json}}我就会变空。

Answer 1

从下图中，看起来location也是一个只有一个对象的数组。因此，您可以尝试使用数组[0]访问top属性，即  row.location [0]赛拓朴。这应该是我认为的。