How add nested loop to ul - li html component without use table on angular 7?

[ahmed elbarbary]

I work on app display dynamic menu based on database SQL server 2012 .

I need to modify html component by replace table html to ul and li and add nested loop below to ul and li

meaning i dont need to use table and i need to use ul li with same code below

but i dont know how to add nested loop below to menu

component.html (need to modify)

<table *ngFor="let rep of reportlist"> <tr> <td>{{rep.reportCategory}}</td> </tr> <tr *ngFor="let subrep of subreportlist"> <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID"> <td>{{subrep.reportName}}</td> </div> </tr> </table>

  

what i try to do it but i have some wrong issue i need to fix

<div class="page-sidebar navbar-collapse collapse"> <ul *ngFor="let rep of reportlist" class="page-sidebar-menu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"> <li class="active open"> <a id="menu"> <i class="rep["menuIcon"]"></i> <span class="title">"'rep["ReportCategory"]''"</span> @*<span class="arrow open"></span>*@ </a> <ul class="sub-menu" style="display:block;" id="submenu"> @foreach (DataRow row1 in Model.Rows) { <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID"> <td>{{subrep.reportName}}</td> </div> <li> <a href="~/Home/Regulation?id=@row1["ReportID"]&name=@row1["ReportName"]"> <i class="@row1["IconClass"]"></i> <span class="title">@row1["ReportName"]</span> </a> </li> } } </ul> </li> </ul> 

  </div>