在数组所有元素中打印 Json 嵌套数组答案

【问题标题】：Print Json Nested Array in Array all elements在数组所有元素中打印 Json 嵌套数组
【发布时间】：2019-06-14 11:02:55
【问题描述】：

JSON DATA Format 我有 Json 文件嵌套数据，数据在数组中的数组内，有些数组在 2 个数组内，有些有 4 个，有些文件夹没有 ant 数组。如果在 2,3,4 和嵌套的 2 或 4 内，我想打印所有数组数据。

我使用循环内的 for 循环以角度打印 3 个数组数据。我使用 3 个 for 循环和 3 次数据打印

 <ul *ngFor="let bird of parts_">
     <li>{{bird.name}}</li>
     <li [ngStyle]="{'color': bird.type == 'folder' ? 'red' : 'green'}"> 
        {{bird.type}}</li>
     <ul *ngFor="let item of bird.items">
       <li>{{item.name}}</li>
       <li >
       <ul *ngFor="let item1 of item.items">
         <li>{{item1.name}}</li>

         <ul *ngFor="let item2 of item1.items">
           <li>{{item2.name}}</li>
         </ul>
       </ul>
      </li>
     </ul>

</ul>

3 Time Loop Result 如果有 3,4,7 文件夹，我想要输出的是该程序打印数组内的数据。我不想一次又一次地使用循环。所以我想动态打印文件中的所有 json 数据数组。

【问题讨论】：

那么您应该创建一个以数组为输入的组件，并在其模板中递归地使用该组件
将数组映射到组件中，然后在模板中打印
能否发给组件数组的示例代码

标签： arrays json angular nested

【解决方案1】：

我相信您需要创建通过@Input字段接受文件夹的组件，该组件将显示当前文件夹名称和如果文件夹有子文件夹它将遍历它们并使用 self（同一组件）显示每个文件夹（通过 @Input 字段将每个文件夹传递给组件）。

通过这种递归，您将无需手动重复循环。希望对您有所帮助。

【讨论】：