Question

您好，我正在Angular 6中开发Web应用程序。我正在尝试动态生成手风琴菜单。我正在打服务电话以获取菜单详细信息。基本上是树状结构。每当有子元素时，我都想再次进行服务调用并获取和显示子元素。此层次结构可能会持续到N个级别。所以我已经开始研究它。首先，当页面加载时，我进行服务调用并将其绑定到HTML。以下是我的服务电话和回复。

ngOnInit(){
    this.jsonservice.getJSON().subscribe(result=>{
        this.values=(this.keys(result));   
       });
}
keys(result) : Array<string> {
  return Object.values(result);
}

拨打服务电话后得到的数据如下。

{
        "type": "abb.sst.config@1",
        "objectId": "fd1230e9-a407-4842-b16e-21d847a36d21",
        "model": "abb.ability.configuration",
        "version": 1,
        "internalUseOnly": "true",
        "properties":"children"
}

在上述数据中，标记属性包含子代作为值，因此我想显示属性，并且每当用户单击属性时，我都要进行另一个服务调用并从服务中获取一些数据并将其绑定到html中。

下面是我的HTML代码。

 <ul class="nav nav-stacked" id="accordion1">
                <li class="panel" *ngFor="let value of values"> 
                    <div *ngIf="value!='children'">
                            <a href="#">  {{value}}   </a>
                    </div>
                </li>
 </ul>

我发现很难编写适当的html来生成预期的结果。根据我的要求输出应该看起来像

 type + 
 Whenever user clicks type display abb.sst.config@1()  
 objectId+
 Whenever user clicks objectId display fd1230e9-a407-4842-b16e-21d847a36d21 
 model+ 
 Whenever user clicks model display abb.ability.configuration 
 properties +  
 Whenever user clicks provision to make api call and bind response as child 
 elements to properties

我只是试图实现这一点。我被困在以下地方。根据我的理解，我必须遍历键和值，如果值包含属性，则应提供进行api调用的条件。我不确定我所遵循的方法是否正确。有人可以帮助我以正确的方式帮助我实现这一目标吗？如果有任何帮助，将不胜感激。万分感谢。

如何动态生成手风琴菜单？

0 个答案: