时间戳

首页 > 解决方案 > 如何在 Angular 中创建具有任意深度的文件夹结构？

html - 如何在 Angular 中创建具有任意深度的文件夹结构？

问题描述

我创建了一个对象数组：

  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>

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

标签： htmlangular

解决方案

您可以使用递归组件。

首先你可以定义一个文件夹接口：

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

推荐阅读