Как связать пользовательский интерфейс древовидной структуры с помощью бесконечного JSON - Angular 8 - PullRequest
Новая
       36

Как связать пользовательский интерфейс древовидной структуры с помощью бесконечного JSON - Angular 8

0 голосов
/ 23 апреля 2020

У меня есть структура 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, et c .. не являются обязательными. Это просто ваша справка. Мне просто нужно представление дерева только без какого-либо материала. Мне нужно добиться этого с помощью 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

Надеюсь, вы, ребята, понимаете, чего я хочу. Пожалуйста, помогите мне решить это. Заранее спасибо:)

1 Ответ

0 голосов
/ 24 апреля 2020

В 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 будет вашим основным набором данных в каждом дочернем случае, когда будет заполнен шаблон ref. Вы можете перебирать вложенный список детей и связывать данные внутри foldetTemplate с folder object.

...