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

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>

<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"]"__]
                        <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"]"__]
                                        <span class="title">@row1["ReportName"]</span>

                                    </a>
                                </li>
                            }
                        }


                    </ul>
                </li>


        </ul>
    </div>