我试图使左侧菜单折叠成手风琴，但不起作用？

Question

我在angular 7应用程序上工作，我尝试使左侧菜单手风琴可展开和折叠，但不起作用。

对于主菜单，我将主报告类别显示为：

<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>

对于显示子类别报告，我依靠CategoryID在类别和子类别之间进行联接：

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

CSS手风琴：

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

我在Stackbliz上工作时已经有了数据，并且显示主类别和子类别，但是我无法解决此问题。“>

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

更新的帖子我的按钮逻辑[]

我需要将主要类别传递给函数getreportbycategory，但我不知道

     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);
  }
还有打开页面时如何将它们显示为手风琴。
如果可以的话，您能告诉我代码吗？>    

我在angular 7应用程序上工作，我尝试使左侧菜单手风琴可展开和折叠，但不起作用。对于主菜单，我将主报告类别显示为：

在ngonInit的所有报告数据中添加一个“折叠”字段，将折叠字段向下传递到每个子项中，根据您向下传递的折叠字段将ngClass设置为“显示：阻止” /“显示：无”开关，设置onclick切换折叠字段的真/假]

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>

Answer 1

在ngonInit的所有报告数据中添加一个“折叠”字段，将折叠字段向下传递到每个子项中，根据您向下传递的折叠字段将ngClass设置为“显示：阻止” /“显示：无”开关，设置onclick切换折叠字段的真/假]

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

}