第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何在 Angular 中創(chuàng)建任意深度的文件夾結(jié)構(gòu)?

如何在 Angular 中創(chuàng)建任意深度的文件夾結(jié)構(gòu)?

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

3 回答

?
慕桂英4014372

TA貢獻(xiàn)1871條經(jīng)驗 獲得超13個贊

您可以使用遞歸組件。


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


interface Folder {

  id: number;

  folderName: string;

  files: string[];

  folders: Folder[];

}

然后用它來正確定義您的數(shù)據(jù):


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: []

        }

      ]

    };

然后創(chuàng)建一個組件來顯示任何文件夾對象:


*.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;    

}


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

TA貢獻(xiàn)1824條經(jīng)驗 獲得超5個贊

我喜歡用ng-template這些東西。您可以定義一個可重復(fù)使用的模板,該模板反過來會呈現(xiàn)其自身。


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

這是一個工作示例。


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

TA貢獻(xiàn)1806條經(jīng)驗 獲得超5個贊

縮進(jìn)的一種解決方案:

家長:

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

怎么運(yùn)行的:

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

這會根據(jù)類值創(chuàng)建內(nèi)聯(lián)樣式


父級:基本情況:


 [indentationLevel]="0"

文件夾: 進(jìn)度:


 [indentationLevel]="indentationLevel + 1"


查看完整回答
反對 回復(fù) 2023-12-04
  • 3 回答
  • 0 關(guān)注
  • 191 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號