在Angular JS中递归模板元素2

我在Angular 2中遇到了一种情况。我必须通过基于子的ngFor迭代。我的组件应该能够基于给定的输入呈现列表。因此，这里的数据结构在Angular JS中递归模板元素2

[ 
{ 
    name: 'ABCD', 
    child:[ 
    name: 'A1', 
    child:[ 
     name: 'A1.1', 
     child:[....] 
    ] 
    ] 
} 
]

现在，我试图通过使用操作DOM，它是工作ngOnInit组件生命周期的渲染我的模板内的这种结构。

有没有其他的方式没有操纵角2中的DOM？可能是通过使用ngFor内部模板或其他东西。我尝试了很多东西，但没有运气。

UPDATE：尝试DOM操作

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'multiple-drop-down', 
    template: ` 
    <div class="dropdown"> 
    <button id="dLabel" type="button" class="btn btn-primary" 
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       {{selected.size}} item selected<span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu treeview" aria-labelledby="dropdownMenu"> 
     <li id="item-lists"> 
      <a href="javascript:void(0);" (click)="toggleItemSelect($event)"> 
       <input (change)="selectAll($event)" type="checkbox" id="checkbox-select-all"> 
       <label for="tall" class="custom-unchecked">Select All</label> 
      </a> 
     </li> 
    </ul> 
    </div> 
    `, 
}) 
export class MultipleDropDownComponent implements OnInit { 
menuItemList: Array<MenuObject>; 
selected: Set<string>; 

constructor() { 
    this.selected = new Set<string>(); 
    this.menuItemList = [ 
    { name: 'item 1', id: 'A', child: [ 
     { name: 'item 1.1', id: 'A1', child: [ 
      { name: 'item 1.11', id: 'Aa1', child: []}, 
      { name: 'item 1.12', id: 'Aa2', child: []}, 
      { name: 'item 1.13', id: 'Aa3', child: []} 
     ]}, 
     { name: 'item 1.2', id: 'A2', child: []}]}, 
    { name: 'item 2', id: 'B', child: []}, 
    { name: 'item 3', id: 'C', child: []}, 
    { name: 'item 4', id: 'D', child: []}]; 
    } 

    ngOnInit() { 

    // calling render method to populate dropdown values 
    this.renderChildElements('item-lists', this.menuItemList , 'first'); 
    } 

    renderChildElements(id: string, items: MenuObject[], key: string): void { 
    let parent = this.createULElement(id, key); 
    items.forEach((element: MenuObject) => { 
     let Li = document.createElement('li'); 
     Li.setAttribute('id', element.id); 
     Li.innerHTML = `<a href="javscript:void(0);" 
         (click)="toggleItemSelect($event)"> 
         <input type="checkbox" name="` + element.name + `" 
         id="` + element.id + `" (click)="toggleMultiSelect($event, ` + element + `)"> 
         <label for="tall-1" class="custom-unchecked">` + element.name + `</label> 
         </a>`; 
     document.querySelector('#' + parent).appendChild(Li); 

     // this condition is responsible for recurrsion process 
     if (element.child.length > 0) { 
      this.renderChildElements(element.id, element.child, element.id); 
     } 
    }); 
    }

createULElement(parentId: string, childId: string): string { 
    let ulId = childId + 'ul'; 
    let newUl = document.createElement('ul'); 
    newUl.setAttribute('id', ulId); 
    document.querySelector('#' + parentId).appendChild(newUl); 
    return ulId; 
    } 
}

export interface MenuObject { 
    id: string; 
    name: string; 
    child?: MenuObject[]; 
}

来源

2016-09-16 Rohit

类似于http://stackoverflow.com/questions/38821475/recursive-component-loading-with-recursive-array/38822751#38822751？ –

这可能也是有趣的你的用例（不是必需的）http://stackoverflow.com/questions/37602561/ng2-equivalent-of-require/37606138#37606138 –

@GünterZöchbauer没有这只是一个项目的迭代。正如你可以看到我的数组为n个子数据。而我的ngFor应该足够聪明，以检查它是否有孩子应该迭代数据，并且每个数据集都有自己的孩子。我希望你能理解正在努力达成的目标。 – Rohit

这应该做你想要什么：

@Component({ 
    selector: 'child', 
    template: ` 
<div>{{data?.name}}</div> 
<child [data]="data?.child]></child>` 
}) 
class ChildComponent { 
    @Input() data; 
}

@Component({ 
    selector: 'my-app', 
    template: ` 
<child [data]="data?.child]></child>` 
}) 
class ChildComponent { 
data = [ 
{ 
    name: 'ABCD', 
    child:[{ 
    name: 'A1', 
    child:[{ 
     name: 'A1.1', 
     child:[....] 
    }] 
    }] 
} 
]; 
}

来源

2016-09-16 07:31:51

好吧，让我试试这个 – Rohit

在Angular JS中递归模板元素2

回答

相关问题