Question

我正在创建一个下拉列表，其中包含json之类的任何级别，如

    [
        {name:'Hi',value:[]},
        {name:'Hello',value:[
            {name:'Xoxo',value:[]},
            {name:'Yolo',value:[]}
        ]},
        {name:'Hey',value:[]},
        {name:'Hola',value:[]}
    ]

该值可以包含另一个json对象。现在我在角度2做这个。我尝试的是在打字稿代码中使用递归。

createDropdownHtml(links,menuText){
    this.html+='<clr-dropdown>';
    this.html+=` <button type="button" clrDropdownTrigger>`+menuText+`
            </button>`;
    this.html+='<clr-dropdown-menu *clrIfOpen>';
    for(let link of links){
        if(link.value.length==0){
            console.log(link.name+' not nested');
            this.html+='<button type="button" clrDropdownItem (click)="linkClicked($event)">'+link.name+'</button>'
        }
        else{
            console.log(link.name+' nested');
            this.createDropdownHtml(link.value,link.name);
        }
    }
    this.html+=`</clr-dropdown-menu>
    </clr-dropdown>`;
}

现在在@Component模板中我编写了{{html}}，但这只是将html打印为字符串。

然后我尝试使用<div [innerHTML]="html"></div>，但后来没有渲染角度组件。

我的问题很简单。我想创建一个带有任意数量的嵌套下拉列表的角度下拉菜单，仅使用json文件。因为我不能在html中进行递归，所以我真的不会点击如何做到这一点。

Answer 1

在您的情况下，我们要创建 ng-template ，并使用 viewContainerRef 以编程方式添加它。我将根据您的json数组结构提供示例代码

<强> HTML

bool HasDoubleOtherAction = privilegeList.Any(outer => privilegeList
                               .Any(inner => outer.Type == inner.Type
                                             && outer.AccessType == inner.AccessType
                                             && outer.Value == inner.Value
                                             && outer.Action != inner.Action));

包含html的下拉列表是bootstrap

<强> TS

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <ng-template #dropdownvalue>
    </ng-template>
  </ul>
</div>

<ng-template #dropdown let-data>
  <li><a (click)="call(data.link)">{{data.link}}</a></li>
</ng-template>

为了更好地说明，请参阅演示link

以角度2以编程方式从json创建嵌套组件

1 个答案: