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"

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

我在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>

Answer 1

您拥有大部分代码，但是ngFor并未以这种方式使用。带有ngFor的html标签将重复出现，这就是为什么您应该在li中而不是列表标签ul中使用它。这样的话适合您：

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

此确切示例涵盖了here in the docs。

编辑：如果要访问列表的键，在此SO answer中，您可以看到Angular6中检索它的新方法。对于您的示例，最终将像这样：

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

您可以在docs中详细了解keyValuePipe。

遍历JSON键和值

1 个答案: