Ich versuche, eine Angular 2-Komponente rekursiv mit einem rekursiven Array zu laden (plunk:http: //plnkr.co/edit/3npsad? p = preview).

Geben Sie dieses rekursive Array an:

[
  {
    "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"
      }
    ]
  }
]

Ich brauche die folgende Ausgabe:

<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>

Ich konnte nur die erste Ebene der Eingabe als Show in meinem Plunk rendern. Wie kann ich meine Komponente rekursiv iterieren lassen, um die gewünschte Ausgabe zu rendern? Das Eingabearray kann eine beliebige Anzahl von Elementen und Verschachtelungen enthalten.

Vielen Dank