Html 如何创建具有任意角度深度的文件夹结构？

我创建了一个对象数组：

  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>

{{folder.id}{{folder.folderName}}

{{folder.files}}




{{folder2.id}{{folder2.folderName}

{{folder.files}}

现在我想知道如何显示包含任意数量子文件夹的文件夹。 在我的方法中，如果我想再往下一层，我总是要添加代码，但这是重复的。

---

有没有别的办法解决这个问题？

我喜欢用

ng模板来处理这类事情。您可以定义一个可重用的模板，该模板依次呈现其自身

<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>




{{folder.folderName}
{{file}



我喜欢使用
ng模板来处理这类事情。您可以定义一个可重用的模板，该模板依次呈现其自身

<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>




{{folder.folderName}
{{file}



您可以使用递归组件

首先，您可以定义文件夹接口：

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>

您可以使用递归组件

首先，您可以定义文件夹接口：

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>

您可以使用“递归组件”方法，就像这里解释的：谢谢，这对我很有帮助！您可以使用“递归组件”方法，就像这里解释的：谢谢，这对我很有帮助！将新文件夹添加到子文件夹时不起作用。我编辑了数组，但视图中没有任何更改。你是对的，示例不起作用。我已经更新了示例，以演示它是否正常工作。将新文件夹添加到子文件夹时不起作用。我编辑了数组，但视图中没有任何更改。你是对的，示例不起作用。我已经更新了示例，以演示它是否正常工作。