Angular 使用 ngFor 显示子项时出现问题

Question

我有一些数据需要在组件 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

我该如何解决这个问题才能正确显示？

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

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

Angular 使用 ngFor 显示子项时出现问题

Angular issue displaying subitems with ngFor

angular

angular11