使用 ngFor 显示子项的角度问题答案

【问题标题】：Angular issue displaying subitems with ngFor使用 ngFor 显示子项的角度问题
【发布时间】：2021-01-21 17:43:32
【问题描述】：

我有一些数据需要在组件 html 中显示，由文件夹名称和文件夹内的文件组成。

这是数据：

data = [
    {
      "name": "folder1", 
      "files": [ 
        { 
          "name": "file1.txt", 
        },
        { 
          "name": "file2.txt", 
        }  
      ] 
    },
    { 
      "name": "folder2", 
      "files": [ 
        { 
          "name": "file1.txt", 
        }, 
        { 
          "name": "file2.txt", 
        },
        { 
          "name": "file3.txt", 
        } 
      ] 
    }
    
  ];

这就是我正在尝试的：

<ul *ngFor="let test of data">
  <li><h5>{{ test.name }}</h5></li>
  <li>{{ test.files.name }}</li>
</ul>

但我得到的结果是：

folder1
folder2
folder1
folder2
folder1
folder2

我需要的输出是：

folder1
  file1.txt
  file2.txt
folder2
  file1.txt
  file2.txt
  file3.txt

如何解决这个问题，使其正确显示？

【问题讨论】：

标签： angular angular11

【解决方案1】：

我不确定该代码是如何产生该输出的——您确定它是真实的代码吗？从您的示例来看，{{ test.files.name }} 将为空。

无论如何，您只是循环浏览文件夹 - 要列出内容，您需要文件的内部循环。所以你可以嵌套它 - 像这样。

<ul *ngFor="let test of data">
  <li><h5>{{ test.name }}</h5></li>
  <ul *ngFor="let file of test.files">
    <li>{{ file.name }}</li>
  </ul>
</ul>

注意 - 这只是为了展示想法 - 实际上，如果任何文件夹没有文件属性，这将导致问题，因此进行一些检查是个好主意。

【讨论】：