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

正しく表示されるようにするには、どうすれば修正できますか?