Как создать структуру папок с произвольной глубиной в Angular?

Question

Я создал массив объектов:

  folders = [
    {
      id: 1,
      folderName: "Folder1",
      files: ["File 1", "File 2"],
      folder: [
        {
          folderName: "Subfolder of folder1",
          folder: []
        }
      ]
    },
    {
      id: 2,
      folderName: "Folder2",
      files: ["File 1", "File 2"],
      folder: []
    }
  ]

и хочу отобразить информацию, а также информацию о подпапке в виде подсписка под именем папки:

<ul *ngFor="let folder of folders">
  <li> {{folder.id}} {{folder.folderName}} 
    <ul>
      <li>{{folder.files}}</li>
    </ul>
  </li>
  <ng-container *ngIf="!(folder.folder.length <= 0)">
  <ul *ngFor="let folder2 of folder.folder">
    <li>
      {{folder2.id}} {{folder2.folderName}}
      <ul>
        <li>{{folder.files}}</li>
      </ul>
    </li>
  </ul>
</ng-container>
</ul>

Теперь мне интересно, как я могу отобразить папку с произвольным количеством подпапок. В моем подходе мне всегда нужно добавлять код, если я хочу на go еще один уровень ниже, но это будет повторяться. Есть ли другой способ решения этой проблемы?

Answer 1

Вы можете использовать рекурсивный компонент.

Сначала вы можете определить интерфейс папки:

interface Folder {
  id: number;
  folderName: string;
  files: string[];
  folders: Folder[];
}

Затем используйте его для правильного определения ваших данных:

const folder: Folder = {
      id: 0,
      folderName: "Folder0",
      files: ["File 1", "File 2"],
      folders: [
        {
          id: 1,
          folderName: "Folder1",
          files: ["File 1", "File 2"],
          folders: [
            {
              id:3,
              files: ["File 1"],
              folderName: "Subfolder of folder1",
              folders: []
            }
          ]
        },
        {
          id: 2,
          folderName: "Folder2",
          files: ["File 1", "File 2"],
          folders: []
        }
      ]
    };

Затем создайте компонент для отображения любого объекта папки:

*. html

<h1>{{ folder.folderName }}</h1>
<ul>    
  <li *ngFor="let fileName of folder.files"> 
    {{ fildeName }} 
  </li>
</ul>
<!-- Display subfolders -->
<display-folder *ngFor="let subFolder of folder.folders" [folder]="subFolder"></display-folder>

*. Ts

@Component({
    selector: 'display-folder',
    ...
})
export class DisplayFolder {
    @Input() folder: Folder;    
}

Answer 2

Мне нравится использовать ng-template для такого рода вещей. Вы можете определить повторно используемый шаблон, который, в свою очередь, отображает сам себя.

<ng-container *ngFor="let folder of folders">
    <ul>
        <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{$implicit:folder}"></ng-container>
    </ul>
</ng-container>

<ng-template #folderNode let-folder>
    <li> {{folder.folderName}} </li>
    <li *ngFor="let file of folder.files">{{file}}</li>
    <ng-container *ngIf="folder.folder">
        <ng-container *ngFor="let subFolder of folder.folder">
            <ul>
                <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{$implicit:subFolder}">
                </ng-container>
            </ul>
        </ng-container>
    </ng-container>
</ng-template>

Вот рабочий пример.