How add nested loop to menu component without use table ?

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

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;
});
}
}

I try that but have some issue wrong

class="page-sidebar navbar-collapse collapse">
"let rep of reportlist" class="page-sidebar-menu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
class="active open">
"menu">
class="rep["menuIcon"]">
class="title">"'rep["ReportCategory"]''"
@*class="arrow open">*@
class="sub-menu" style="display:block;" id="submenu">
@foreach (DataRow row1 in Model.Rows)
{
"subrep.reportCategoryID === rep.reportCategoryID">
{{subrep.reportName}}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.