Как добавить вложенный l oop в компонент ul - li html без таблицы использования на angular 7?

Question

Я работаю над динамическим отображением приложения c меню на основе базы данных SQL server 2012.

Мне нужно изменить html компонент, заменив таблицу html на ul и li и добавить вложенный l oop ниже к ul и li

означает, что мне не нужно использовать таблицу, и мне нужно использовать ul li с тем же кодом, приведенным ниже

, но я не знаю, как добавить вложенный l oop ниже к меню

компонент. html (необходимо изменить)

<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"]"></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>