我尝试在 angular 中将左侧菜单 Collapse as accordion 但不起作用?
I try to make left side menu Collapse as accordion in angular but Not Work?
我在开发 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
已更新post
我的按钮业务逻辑
我需要将主要类别传递给函数 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);
}
还有打开页面时如何将它们显示为手风琴。
如果可能的话,你能告诉我代码吗
在 ngonInit 的 allreportcategories 数据中添加一个 'collapse' 字段,将 collapse 字段传递到每个 child,为 'display: block'/'display: none' 开关设置 ngClass 基于你传下来的折叠字段,设置onclick来切换折叠字段
的true/false
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>
我在开发 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
已更新post 我的按钮业务逻辑
我需要将主要类别传递给函数 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);
}
还有打开页面时如何将它们显示为手风琴。
如果可能的话,你能告诉我代码吗
在 ngonInit 的 allreportcategories 数据中添加一个 'collapse' 字段,将 collapse 字段传递到每个 child,为 'display: block'/'display: none' 开关设置 ngClass 基于你传下来的折叠字段,设置onclick来切换折叠字段
的true/falseimport { 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>