循环遍历JSON键和值

Question

这看起来很简单，但也有一些原因我不能像我想要的那样循环这些项目

我有个json对象

"meters":{  
      "Rozvadec M11":{  
         "0":{  
            "Name":"m11-mcu13_sm114",
            "Title":"Svarovaci centrum Flexarc",
            "Parent":"m11-mcu13",
            "Status":"Running",
            "State":false
         },
         "1":{  
            "Name":"m11-mcu13_sm115",
            "Title":"Brousici centrum Solicad",
            "Parent":"m11-mcu13",
            "Status":"Running",
            "State":false
         }
      },
      "Rozvadec R1-L":{  
         "0":{  
            "Name":"r1-l-mcu1_sm100",
            "Title":"Amada NCT1",
            "Parent":"r1-l-mcu1",
            "Status":"Device unavailable",
            "State":false
         },
         "1":{  
            "Name":"r1-l-mcu1_sm101",
            "Title":"Amada 1",
            "Parent":"r1-l-mcu1",
            "Status":"Device unavailable",
            "State":false
         },
         "2":{  
            "Name":"r1-l-mcu1_sm102",
            "Title":"Amada 2",
            "Parent":"r1-l-mcu1",
            "Status":"Device unavailable",
            "State":false
         }
      },

我想做的是在所有的仪表中循环使用

"Rozvadec M11"
"Rozvadec R1-L"

在每个表下面都有一个不同智能仪表名称的列表

我在T里有这个

let list =  this.http.get('EndpointURL');
         list.subscribe (
           (response: Response)=> 
           {this.meters.push(response);
           console.log(this.meters);
         })

这是html中的(在嵌套for循环之前，我只试图先通过仪表循环)。

<ul *ngFor="let meter of meters">
    <li>{{ meter}}</li>
</ul>

Answer 1

您的大部分代码都是正确的，但是ngFor不是以这种方式使用的。带有ngFor的html标记将被重复，这就是为什么您应该在li中而不是在list标记ul中使用它。对你来说是这样的：

<ul>
    <li *ngFor="let meter of meters">
        {{meter}}
    </li>
<ul>

这个精确的例子涵盖了在这里的医生。

编辑:如果您想访问列表的键，在这个所以回答中，您可以在Angular6中看到检索它的新方法。对于你的例子来说，结果会是这样的：

<ul>
    <li *ngFor="let meter of meters | keyvalue">
        {{meter.key}}
    </li>
<ul>

您可以在keyValuePipe中阅读更多关于文档的内容。