オブジェクトの子長を動的に変更するネストされたngForループを作成する方法

Question

私のAngularアプリにファイルツリーを表示したい。もちろん、ファイルツリーは複数のレベルの複数の子を持つことができます。ここで

はJSONオブジェクト私の例である：

"root": { 
    "element": { 
     "displayName": "testFolder", 
     "path": "testFolder/", 
     "parent": "" 
    }, 
    "children": [{ 
     "element": { 
      "displayName": "folder1", 
      "path": "testFolder/folder1/", 
      "parent": "testFolder/" 
     }, 
     "children": [] 
    }, { 
     "element": { 
      "displayName": "sub_folder", 
      "path": "testFolder/sub_folder/", 
      "parent": "testFolder/" 
     }, 
     "children": [{ 
      "element": { 
       "displayName": "testDir3", 
       "path": "testFolder/sub_folder/testDir3/", 
       "parent": "testFolder/sub_folder/" 
      }, 
      "children": [] 
     }] 
    }] 
} 

childrenプロパティは、任意に入れ子にすることができます。私はこれをどのように扱うべきですか？

<template ngFor let-outer [ngForOf]="OuterArray" let-uterIndex="index"> 
     <template ngFor let-inner [ngForOf]="InnerArray" let-innerIndex="index"> 
     </template> 
    </template> 

と全体のファイルツリーを再帰的にそれを使用するための横断：

Answer 1

限りのためにネストngfor懸念しているとして、あなたはこのようなものを使用することができます。