递归地使用 ngFor 迭代对象的对象

Posted 2023-03-13

【中文标题】递归地使用 ngFor 迭代对象的对象

【英文标题】：Iterating over n object of objects using ngFor recursivley

【发布时间】：2019-10-26 18:57:01

【问题描述】：

我有一个 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 材质扩展面板中显示每个文件夹：

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

【参考方案1】：

您可以将递归模板设计模式用于您的用例。比如here。

demo

【讨论】：

这真的很有帮助！不知道这存在，但我添加并调整了它，它可以工作，谢谢！

很高兴，我可以:)

【参考方案2】：

您可以使用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>

【讨论】：

这实际上读出了我需要的内容，但是第二级只是打印出 json :)

是的 bcs 用于调试目的，我们使用名为“json”的管道，因此您知道我们所需的键值在哪个位置。