Question

我是angular2的新手，并尝试使用angular2

显示我在json中的数据

下面是我的json数据：

{
   "logoEditorData":{
      "logo":{
         "companyNameOption":{
            "fontSize":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "letterSpacing":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "FontCases":[
               "upper",
               "lower"
            ]
         },
         "taglineNameOption":{
            "fontSize":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "letterSpacing":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "FontCases":[
               "upper",
               "lower"
            ]
         },
         "commonSetting":{
            "iconTextSize":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "logoSize":{
               "currentValue":50,
               "minValue":1,
               "maxValue":100
            },
            "iconDistance":{
               "currentValue":40,
               "minValue":1,
               "maxValue":100
            },
            "taglineSize":{
               "currentValue":60,
               "minValue":1,
               "maxValue":100
            }
         },
         "commonFonts":{
            "companyNameFont":{
               "selected":[
                  "sansSerief"
               ],
               "sansSerif":{
                  "fontImage":"..\/src\/images\/sans-serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               },
               "serif":{
                  "image":"..\/src\/images\/serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               }
            },
            "taglineNameFont":{
               "selected":[
                  "sansSerief"
               ],
               "sansSerif":{
                  "fontImage":"..\/src\/images\/sans-serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               },
               "serif":{
                  "image":"..\/src\/images\/serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               }
            }
         }
      },
      "colors":{
         "image":"abc"
      },
      "layout":{
         "placement":[
            "iconSingle",
            "iconTextLeft",
            "iconTextTop",
            "text"
         ],
         "container":{
            "none":"none",
            "iconOnly":"icon",
            "iconWithText":"both",
            "whole":"whole"
         }
      }
   }
}

我为此创建了一个服务，然后尝试使用ngfor在我的应用程序组件中订阅我的数据，我也尝试使用管道来解决我的问题，但没有得到预期的结果。有没有像我们在jquery中那样获取数据的方法，使用带有键和值的$ .each对应jquery中的嵌套循环。

任何人都可以帮助我吗？

Answer 1

使用Object.keys()获取JSON对象的键。下面的代码将返回logoEditorData中的所有键，即徽标，颜色和布局。现在，您可以通过json对象迭代此键以查找值。 sample code

在TS文件中

constructor(){
  this.jsonDataKeys=Object.keys(this.jsonData.logoEditorData);
}

在HTML文件中

<div *ngFor="let item of jsonDataKeys">
   <div>Key : {{item}} Value: {{jsonData.logoEditorData[item] | json}}</div>
  </div>

与angular2深度嵌套的json

1 个答案: