看起来很简单，但是有些我无法像我想的那样遍历所有项目
我有这个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"
在每个下方都有一个不同的智能电表名称列表
我在ts中有这个
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>
您拥有大部分代码，但是ngFor并未以这种方式使用。带有ngFor的html标签将重复出现，这就是为什么您应该在li而不是list标签中使用它ul。对于您来说将是这样的：
<ul>
<li *ngFor="let meter of meters">
{{meter}}
</li>
<ul>
编辑：如果您想访问列表的键，在此SO答案中，您可以在Angular6中看到检索它的新方法。对于您的示例，最终将如下所示：
<ul>
<li *ngFor="let meter of meters | keyvalue">
{{meter.key}}
</li>
<ul>
您可以keyValuePipe在docs中阅读有关的更多信息。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句