Question

我有一个Angular项目，需要显示服务器的文件夹结构。我有这种形式的json数据（演示名称）：

{
    "dirPath": "file:///C:/dev/gallery/filesFromApp/",
    "folderName": "filesFromApp",
    "fileNames": [
        "firmwareUpdate101.txt",
        "keyboard_output.txt",
        "screen-locks.txt"
    ],
    "dirInfoList": [
        {
            "dirPath": "file:///C:/dev/gallery/filesFromApp/Beta1/",
            "folderName": "Beta1",
            "fileNames": [
                "beta1Ubdate.txt"
            ],
            "dirInfoList": []
        },
        {
            "dirPath": "file:///C:/dev/gallery/filesFromApp/Beta2/",
            "folderName": "Beta2",
            "fileNames": [
                "Beta2UPDATE!.txt"
            ],
            "dirInfoList": [
                {
                    "dirPath": "file:///C:/dev/gallery/filesFromApp/Beta2/omaewa/",
                    "folderName": "omaewa",
                    "fileNames": [
                        "nani.txt"
                    ],
                    "dirInfoList": []
                }
            ]
        }
    ]
}

我需要做的是在Angular Material Expansion面板中显示每个文件夹：

<mat-expansion-panel *ngIf="dirInfos !== undefined">
  <mat-expansion-panel-header>
    <mat-panel-title>
      {{dirInfos.folderName}}
    </mat-panel-title>
    <mat-panel-description>
      {{dirInfos.dirPath}}
    </mat-panel-description>
  </mat-expansion-panel-header>
  <mat-expansion-panel *ngFor="let dir of dirInfos.dirInfoList">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{dir.folderName}}
      </mat-panel-title>
      <mat-panel-description>
        {{dir.dirPath}}
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <p *ngFor="let file of dirInfos.fileNames">{{file}}</p>
</mat-expansion-panel>

Image to Visual example

我的问题是文件结构可能会很深，即25个文件夹。我不知道如何递归检查此内容，然后生成所需的HTML，是否有想法？ ngFor可能会有所帮助，但是即使我在对象上使用Object.Keys，我也无法实现此目的。

Answer 1

您可以使用keyvalue管道来迭代循环。这样您就可以迭代遍历对象。

因此，我们实现的逻辑是，当您在json中有对象时，使用keyvalue管道，而在数组中使用简单的*ngFor而没有keyvalue管道。

<mat-expansion-panel *ngIf="dirInfos !== undefined">
  <mat-expansion-panel-header>
    <mat-panel-title>
      {{dirInfos.folderName}}
    </mat-panel-title>
    <mat-panel-description>
      {{dirInfos.dirPath}}
    </mat-panel-description>
  </mat-expansion-panel-header>
  <mat-expansion-panel *ngFor="let dir of dirInfos.dirInfoList | keyvalue">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{dir | json}} 
<!-- HERE YOU WILL GET THE DATA WHICH IS SEPARATED INTO IN TO KEY VALUE PAIR   -->
      </mat-panel-title>
      <mat-panel-description>
        {{dir.dirPath}}
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <p *ngFor="let file of dirInfos.fileNames">{{file}}</p>
</mat-expansion-panel>

Answer 2

您可以为您的用例使用递归模板设计模式。就像在here中一样。

demo

使用ngFor递归遍历对象的n个对象

2 个答案: