3 回答

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

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>

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"
- 3 回答
- 0 關(guān)注
- 191 瀏覽
添加回答
舉報