Carregamento de componente recursivo com matriz recursiva
Estou tentando carregar um componente Angular 2 recursivamente com uma matriz recursiva (plunk:http://plnkr.co/edit/3npsad?p=preview)
Dada essa matriz recursiva:
[
{
"id": 1,
"text": "abc"
},
{
"id": 2,
"text": "def",
items: [
{
"id": 21,
"text": "def-1",
items: [
{
"id": 211,
"text": "def-1-1"
},
{
"id": 212,
"text": "def-1-2"
}
]
},
{
"id": 22,
"text": "def-2"
}
]
}
]
Eu preciso da seguinte saída:
<my-item>
<div id="1" text="abc"></div>
</my-item>
<my-item>
<div id="2" text="def"></div>
<my-item>
<div id="21" text="def-1"></div>
<my-item>
<div id="211" text="def-1-1"></div>
</my-item>
<my-item>
<div id="212" text="def-1-2"></div>
</my-item>
</my-item>
<my-item>
<div id="22" text="def-2"></div>
</my-item>
</my-item>
Eu só conseguia renderizar o primeiro nível de entrada como mostrado no meu esforço. Como posso fazer meu componente iterar recursivamente para renderizar a saída desejada? A matriz de entrada pode conter qualquer número de elementos e aninhamento.
Obrigado!