I am faced with the challenge of converting a tree-like structure into a list by utilizing components and subcomponents in Angular 2.
var data = [
{id:"1",
children: [
{id:"2",
children: [
{id: "3"},
{id: "3"},
{id: "3"},
{id: "3"},
]},
{id:"2",
children: [
{id: "3"},
{id: "3"},
{id: "3"},
{id: "3"},
]}
]}
]
My goal is to traverse this structure and generate an HTML list by using different components based on the depth of each loop iteration.
TypeScript
// ROOT
@Component({
selector: 'root',
})
@View({
templateUrl: '
<childOne *ng-for="#data for list.children" [data]="data"></childOne>
',
directives: [ChildOne, NgFor]
})
class Root{
list:Array<Object>;
constructor() {
this.list = // request to backend
}
}
// COMPONENT 1
@Component({
selector: 'childOne',
properties: ['data']
})
@View({
templateUrl: '
{{data.id}}
<childTwo *ng-for="#childOneData for data.children" [data]="childOneData "></childTwo>
',
directives: [ChildTwo, NgFor]
})
class ChildOne{
}
// COMPONENT 2
@Component({
selector: 'childTwo',
properties: ['data']
})
@View({
templateUrl: '
{{data.id}}
<childThree *ng-for="#childTwoData for data.children" [data]="childTwoData"></childThree>
',
directives: [ChildThree, NgFor]
})
class ChildOne{
constructor() {
}
}
// COMPONENT 3
@Component({
selector: 'childThree',
properties: ['data']
})
@View({
templateUrl: '{{data.id}}',
})
class ChildThree{
constructor() {
}
}
HTML
<head>
<body>
<root></root>
</body>
</head>
Issue
During execution, I encounter an error:
Can't bind to 'ngForFor' since it isn't a know property of the 'template' element and there are no matching directives with a corresponding property
This error specifically pertains to the *ng-for directive in the ChildTwo Component. Strangely, everything works perfectly fine once I remove the HTML tag.
Could there be any limitations or pitfalls when using *ng-for that I might have overlooked?
Thanks