How add nested loop to menu component without use table ?

Question

I work on angular 7 with asp.net core 2.2 app new project and i have component inside project 

 

I need to add menu in place of table to display dynamic menu

 

meaning i dont need to use table and i need to use menu

 

so i need to add nested loop below to menu i because i use dynamic menu .

 

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

 

<p>report-category works!</p>
<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>

 

import { Component, OnInit } from '@angular/core';
import { DisplayreportService } from '../displayreport.service'
import { HttpClient } from '@angular/common/http';
import { Router , ActivatedRoute} from '@angular/router';
import { report } from '../report.model';
@Component({
  selector: 'app-report-category',
  templateUrl: './report-category.component.html',
  styleUrls: ['./report-category.component.css']
})
export class ReportCategoryComponent implements OnInit {

datalis:string;
reportlist:any[];
subreportlist:any[];
  constructor(public http: HttpClient, private _router: Router, private _displayreport: DisplayreportService) { }

  ngOnInit() {

    console.log(this._displayreport.GetReports()) ;

       this._displayreport.GetReports().subscribe((data: any[]) => {
        this.reportlist = data;

      });
      this._displayreport.GetsubReports().subscribe((data: any[]) => {
        this.subreportlist = data;
      });
  }

}