Javascript Angular JS 2中模板元素的递归

我在第二节有个情况。我必须基于child迭代ngFor。我的组件应该能够根据给定的输入呈现列表。这里是数据结构

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

现在，我尝试在我的模板中通过操作DOM使用组件生命周期ngOnInit呈现这个结构，它正在工作

在angular 2中没有操作DOM的其他方法吗？可能是使用ngFor内部模板或其他方式。我尝试了很多事情，但没有成功

更新：尝试了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);
        }
    });
  }

---

这应该满足您的要求：

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

@组件({
选择器：'子'，
模板：`
{{data？.name}
`
})
类子组件{
数据=[
{
名称：“ABCD”，
儿童：[{
名称：“A1”，
儿童：[{
名称：“A1.1”，
孩子：[……]
}]
}] 
}
];
}

这应该满足您的要求：

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

@组件({
选择器：'子'，
模板：`
{{data？.name}
`
})
类子组件{
数据=[
{
名称：“ABCD”，
儿童：[{
名称：“A1”，
儿童：[{
名称：“A1.1”，
孩子：[……]
}]
}] 
}
];
}

类似的内容？对于您的用例来说，这可能也很有趣（不是必需的）@GünterZöchbauer不，这只是项目的一个迭代。正如您所看到的，我的数组是n个子数据。我的ngFor应该足够智能，可以检查它是否有子对象，它应该使用数据进行迭代，并且每组数据都有自己的子对象。我希望你能理解我的目标。这种联系有其局限性。我们只能迭代到一个或两个级别。我的组件是通用的，所以它应该自己做。我已经通过DOM操作实现了这一点，但这在angular 2中似乎并不正确。如果您添加显示您尝试的代码，这会更容易。您只需要一个

*ngIf

，它可以识别项目是

名称

还是

子项

。如果是

名称

显示名称，如果是

子项

，则添加子项并将数据传递给子项。这会一直持续到浏览器内存不足；-）类似于？这对于您的用例来说可能也很有趣（不是必需的）@GünterZöchbauer不，这只是项目的一个迭代。正如您所看到的，我的数组是n个子数据。我的ngFor应该足够智能，可以检查它是否有子对象，它应该使用数据进行迭代，并且每组数据都有自己的子对象。我希望你能理解我的目标。这种联系有其局限性。我们只能迭代到一个或两个级别。我的组件是通用的，所以它应该自己做。我已经通过DOM操作实现了这一点，但这在angular 2中似乎并不正确。如果您添加显示您尝试的代码，这会更容易。您只需要一个

*ngIf

，它可以识别项目是

名称

还是

子项

。如果是

名称

显示名称，如果是

子项

，则添加子项并将数据传递给子项。这会一直持续到浏览器内存不足；-）好的让我试试这个好的让我试试这个

@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:[....]
     }]
   }] 
 }
];
}