如何使用无限 JSON - Angular 8 绑定树结构 UI

Question

我有一个 JSON 结构。它包含每个对象的子数组。某些子数组有时可能有值。

我的问题是如何使用以下 JSON 创建树视图：

this.fileList = [
  {
    "name": "New Folder1",
    "children": [
      {
        "name": "New Folder4",
        "children": [
          {
            "name": "New File",
            "children": []
          },
          {
            "name": "New File",
            "children": []
          }
        ]
      },
      {
        "name": "New Folder7",
        "children": []
      }
    ]
  },
  {
    "name": "New Folder2",
    "children": [
      {
        "name": "File1",
        "children": []
      }
    ]
  },
  {
    "name": "New Folder3",
    "children": [
      {
        "name": "New Folder5",
        "children": [
          {
            "name": "New File",
            "children": []
          },
          {
            "name": "New File",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "name": "File1",
    "children": []
  }
]

我的最终输出应该像这样显示在我的屏幕上。（注意：那些arraow，equals等不是强制性的。它只是你的参考。我只需要树视图，没有任何material。我需要通过使用其他一些条件的ngFor，ngIf来实现包括 CSS).

->Folder A
    =>Folder B
        --Folder C
        --Folder D
    =>Folder E
        --Folder F
->Folder G
    =>Folder H
        --Folder I
->Folder J
    =>Folder K
    =>Folder L

我希望你们明白我想要什么。请帮我解决这个问题。提前致谢:)

Answer 1

在Angular中可以使用模板引用来实现这个嵌套视图。例如，这里是代码片段：

<ng-template #folderTemplate let-folder>

    <-- BIND DATA OF FOLDER OBJECT-->

    <div *ngIf="folder.children" class="children-folder">
        <!-- Invoke the recursive template. -->
        <ng-template [ngTemplateOutlet]="folderTemplate"
            [ngTemplateOutletContext]="{ $implicit: folder.children }">
            <!--
                HACK: The "$implicit" property of the ngFor context is what will
                be made available to the template ref's implicit let-query binding.
            -->
        </ng-template>
    </div>
</ng-template>
<ng-template [ngTemplateOutlet]="folderTemplate" [ngTemplateOutletContext]="{ $implicit: rootFolderObject }">
</ng-template>

此处 rootFolderObject 将是您在每个子项出现时的主要数据集，模板引用将被填充。您可以迭代子嵌套列表并将 foldetTemplate 中的数据与 folder 对象绑定。

如何使用无限 JSON - Angular 8 绑定树结构 UI

How do I bind the tree structure UI using endless JSON - Angular 8

angular

binding

treeview

ngfor

angular-ng-if