我在Angular 2中遇到过一种情况。我必须根据孩子迭代ngFor。我的组件应该能够根据给定的输入呈现列表。所以这是数据结构
[
{
name: 'ABCD',
child:[
name: 'A1',
child:[
name: 'A1.1',
child:[....]
]
]
}
]
现在我尝试通过操作DOM使用组件生命周期ngOnInit在我的模板中渲染这个结构,它正在工作。
如果没有在角度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);
}
});
}
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[];
}
答案 0 :(得分:0)
这应该做你想要的:
@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:[....]
}]
}]
}
];
}