我尝试在 angular 中将左侧菜单折叠为手风琴但不起作用？

Question

I work on angular 7 app I try to make left side menu accordion Expandable and Collapse but it does not work.

For main menu I display Main Reports Category as:

<ul *ngFor="let rep of allReportCategories"  style="margin-top:2px;"  class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<span><button class="accordion">{{rep.reportCategory}}</button></span>

For display sub category reports I depend on CategoryID to join between category and sub Category:

*ngFor="let subrep of reportsubCategory"  
<div *ngIf="subrep.reportCategoryID === rep.reportCategoryID" class="wrapper">
 <span class="sideNav nav navbar">{{subrep.reportName}}</span>

CSS Accordion:

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

I work on Stackbliz already have data and Show Main Category and Sub Category but the issue i can't solve Issue of accordion.

https://stackblitz.com/edit/create-1arrvm?file=app%2Fapp.component.html

Updated post my bussiness logic for button

I need to pass main category to function getreportbycategory but i dont know

     this._displayreport.GetreportByCategoryId(this.reportid).subscribe((data: any[]) => {  
            this.reportsubCategory = data; 
          });
 toggleAccordian(event, index) {
      var element = event.target;
      element.classList.toggle("active");
     this._displayreport.GetreportByCategoryId(index);
  }

also How to display them as accordion when open page.

can you show me code if possible for that

Answer 1

add a 'collapse' field in your allreportcategories data at ngonInit, pass down collapse field into every child, set up ngClass for 'display: block'/'display: none' switch based on the collapse field you passed down, set up onclick to toggle the true/false of collapse field

import { Component, OnInit } from '@angular/core';
import { DisplayreportService } from './displayreport.service';
import { HttpClient } from '@angular/common/http';
import { Router , ActivatedRoute} from '@angular/router';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  expanded = new Array(3).fill(false);
datalis:string;
allReportCategories:any[];
reportsubCategory:any[];
reportByCategoryId:any[];
allReportsubCategory:any[];
reportCategoryIdparam:string;
  constructor(public http: HttpClient, private _router: Router, private _displayreport: DisplayreportService) { }

  ngOnInit() {


      // this._displayreport.getallReportCategories().subscribe((data: any[]) => {  
       // this.allReportCategories = data;  

    //  });  
this.allReportCategories=this._displayreport.getallReportCategories().map((e) => {
  e.collapse = false;
  return e
});

console.log(this.allReportCategories)

       //this._displayreport.GetreportByCategoryId(this.reportid)//.subscribe((data: any[]) => {  
       // this.reportByCategoryId = data;  

      //});  
    //  this.reportid="3";
//this.reportByCategoryId=this._displayreport.GetreportByCategoryId////(this.reportid);

  this.reportByCategoryId = this._displayreport.GetreportByCategoryId("3");
  console.log("data by category id" + this.reportByCategoryId);
  this.reportsubCategory=this._displayreport.getallReportsubCategory();   

  }
   toggleAccordian(event, index) {
      var element = event.target;
      console.log("element is" +JSON.stringify(index)  )
      console.log("element is" +JSON.stringify(element)  )
      this.allReportCategories[index].collapse = !this.allReportCategories[index].collapse
    //   element.classList.toggle("active");
    //   if(this.allReportCategories[index].isActive) {
    //    this.allReportCategories[index].isActive = false;
    //   } else {
    //     this.allReportCategories[index].isActive = true;
    //   }    
    //  this._displayreport.GetreportByCategoryId(index);
    //  console.log(this._displayreport.GetreportByCategoryId(index))
  }

}

<div class="row" style="display: block;float: left;margin-left:10px; margin-top: 2px;">
    <div class="page-sidebar navbar-collapse collapse">
    <nav class="colsm12" id="">
            <ul *ngFor="let rep of allReportCategories;let i = index;"  style="margin-top:2px;" 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 ><button class="accordion" (click)="toggleAccordian($event, i)">{{rep.reportCategory}}
                            </button></span>

                        </a>
                        <ul [ngStyle]="{'display':rep.collapse ? 'block' : 'none' }" *ngFor="let subrep of reportsubCategory"  style="display:block;" id="submenu" style="padding-left:7px;" hide="!rep.isActive">


                            <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID" class="wrapper" >


                                <a href="/reportdetails?id={{subrep.reportID}}">


                                            <span class="sideNav nav navbar">{{subrep.reportName}}</span>

                                        </a>

                            </div>



                        </ul>



            </ul>
        </nav>
        </div>
    </div>