使用 angular2 深度嵌套的 json

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>