如何在 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>

现在我想知道如何显示具有任意数量子文件夹的文件夹。在我的方法中，如果我想再降低一级，我总是必须添加代码，但这会是重复的。还有其他方法可以解决这个问题吗？

Answer 1

您可以使用递归组件。首先，您可以定义一个文件夹接口：interface Folder {&nbsp; id: number;&nbsp; folderName: string;&nbsp; files: string[];&nbsp; folders: Folder[];}然后用它来正确定义您的数据：const folder: Folder = {&nbsp; &nbsp; &nbsp; id: 0,&nbsp; &nbsp; &nbsp; folderName: "Folder0",&nbsp; &nbsp; &nbsp; files: ["File 1", "File 2"],&nbsp; &nbsp; &nbsp; folders: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; folderName: "Folder1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files: ["File 1", "File 2"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; folders: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files: ["File 1"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; folderName: "Subfolder of folder1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; folders: []&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; folderName: "Folder2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files: ["File 1", "File 2"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; folders: []&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; };然后创建一个组件来显示任何文件夹对象：*.html<h1>{{ folder.folderName }}</h1><ul>&nbsp; &nbsp;&nbsp;&nbsp; <li *ngFor="let fileName of folder.files">&nbsp;&nbsp; &nbsp; {{ fildeName }}&nbsp;&nbsp; </li></ul><!-- Display subfolders --><display-folder *ngFor="let subFolder of folder.folders" [folder]="subFolder"></display-folder>*.ts@Component({&nbsp; &nbsp; selector: 'display-folder',&nbsp; &nbsp; ...})export class DisplayFolder {&nbsp; &nbsp; @Input() folder: Folder;&nbsp; &nbsp;&nbsp;}

Answer 2

我喜欢用ng-template这些东西。您可以定义一个可重复使用的模板，该模板反过来会呈现其自身。<ng-container *ngFor="let folder of folders">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{$implicit:folder}"></ng-container>&nbsp; &nbsp; </ul></ng-container><ng-template #folderNode let-folder>&nbsp; &nbsp; <li> {{folder.folderName}} </li>&nbsp; &nbsp; <li *ngFor="let file of folder.files">{{file}}</li>&nbsp; &nbsp; <ng-container *ngIf="folder.folder">&nbsp; &nbsp; &nbsp; &nbsp; <ng-container *ngFor="let subFolder of folder.folder">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{$implicit:subFolder}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; </ng-container></ng-template>这是一个工作示例。

Answer 3

缩进的一种解决方案：家长：<ng-container *ngFor="let folder of folders">&nbsp; &nbsp; <app-folder [folder]="folder" [indentationLevel]="0"></app-folder></ng-container>孩子：<div class="folder-row" style="margin-left: {{indentationLevel * 32}}px" (click)="folder.isExpanded = !folder.isExpanded">&nbsp; <ion-icon class="folder-row__icon" *ngIf="folder.type === folderType.group" [name]="folder.isExpanded ? 'folder-open' : 'folder'"></ion-icon>&nbsp; <img class="folder-row__user-image" src="assets/mock-data/{{folder.userId}}.jpg" *ngIf="folder.type === folderType.user" alt="👤">&nbsp; {{folder.title}}</div><ng-container *ngIf="folder.isExpanded">&nbsp; <ng-container *ngFor="let folder of folder.subFolders">&nbsp; &nbsp; <app-folder [folder]="folder" [indentationLevel]="indentationLevel + 1"></app-folder>&nbsp; </ng-container></ng-container>怎么运行的：style="margin-left: {{indentationLevel * 32}}px"这会根据类值创建内联样式父级：基本情况：&nbsp;[indentationLevel]="0"文件夹： 进度：&nbsp;[indentationLevel]="indentationLevel + 1"