亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Angular 中創建任意深度的文件夾結構?

如何在 Angular 中創建任意深度的文件夾結構?

慕的地6264312 2023-12-04 14:27:51
我創建了一個對象數組:  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>現在我想知道如何顯示具有任意數量子文件夾的文件夾。在我的方法中,如果我想再降低一級,我總是必須添加代碼,但這會是重復的。還有其他方法可以解決這個問題嗎?
查看完整描述

3 回答

?
慕桂英4014372

TA貢獻1871條經驗 獲得超13個贊

您可以使用遞歸組件。


首先,您可以定義一個文件夾接口:


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;    

}


查看完整回答
反對 回復 2023-12-04
?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

我喜歡用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>

這是一個工作示例。


查看完整回答
反對 回復 2023-12-04
?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

縮進的一種解決方案:

家長:

<ng-container *ngFor="let folder of folders">

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

  <ion-icon class="folder-row__icon" *ngIf="folder.type === folderType.group" [name]="folder.isExpanded ? 'folder-open' : 'folder'"></ion-icon>

  <img class="folder-row__user-image" src="assets/mock-data/{{folder.userId}}.jpg" *ngIf="folder.type === folderType.user" alt="??">

  {{folder.title}}

</div>

<ng-container *ngIf="folder.isExpanded">

  <ng-container *ngFor="let folder of folder.subFolders">

    <app-folder [folder]="folder" [indentationLevel]="indentationLevel + 1"></app-folder>

  </ng-container>

</ng-container>

怎么運行的:

style="margin-left: {{indentationLevel * 32}}px"

這會根據類值創建內聯樣式


父級:基本情況:


 [indentationLevel]="0"

文件夾: 進度:


 [indentationLevel]="indentationLevel + 1"


查看完整回答
反對 回復 2023-12-04
  • 3 回答
  • 0 關注
  • 197 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號