typescript 有角度的可折叠手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53369784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Collapsible accordion in angular
提问by Maniraj Murugan
I am making accordion to make a collapsible div using javascript in angular application..
我正在制作手风琴以在 angular 应用程序中使用 javascript 制作一个可折叠的 div ..
For which if its not getting open on click over the button on Parent Oneor any other parent name..
为此，如果单击按钮Parent One或任何其他父名称上的按钮未打开..
Html:
网址：
<div *ngFor="let item of data">
<button class="accordion"> {{item.parentName}} </button>
<div class="panel" *ngFor="let child of item.childProperties">
<p> {{child.propertyName}} </p>
</div>
</div>
Ts:
TS：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data: any =
[
{
"parentName": "Parent One",
"childProperties":
[
{ "propertyName": "Property One" },
{ "propertyName": "Property Two" }
]
},
{
"parentName": "Parent Two",
"childProperties":
[
{ "propertyName": "Property Three" },
{ "propertyName": "Property Four" },
{ "propertyName": "Property Five" },
]
},
{
"parentName": "Parent Three",
"childProperties":
[
{ "propertyName": "Property Six" },
{ "propertyName": "Property Seven" },
{ "propertyName": "Property Eight" },
]
}
]
ngOnInit() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
}
Note:As i am new in angular i am making it with javascript way.. So kindly help me to achieve the result using pure angular and typescript..
注意：由于我是 angular 的新手，所以我正在使用 javascript 方式制作它.. 所以请帮助我使用纯 angular 和 typescript来实现结果..
Working stackblitzhttps://stackblitz.com/edit/angular-lp3riw
工作stackblitz https://stackblitz.com/edit/angular-lp3riw
You can see in demo that the parent button are visible but if you click over the button its not getting expanded..
您可以在演示中看到父按钮是可见的，但是如果您单击该按钮，它不会被展开..
Also listed down working collapsible button below with static values..
还列出了下面带有静态值的工作可折叠按钮..
How to make a collapsible accordion as like given stackblitz static values using angular and typescript way (Without any third party or jquery)..
如何使用 angular 和 typescript 方式（没有任何第三方或 jquery）制作可折叠的手风琴，就像给定的 stackblitz 静态值一样。
回答by Nandita Sharma
Keep your function in ngAfterViewInitinstead of ngOnInit. See updated stackblitz
将您的功能保留在ngAfterViewInit而不是ngOnInit. 查看更新的堆栈闪电战
The problem is that on ngOnInit the view is not completely painted, and you do not get all the elements on which you want to bind the function.
问题是在 ngOnInit 上，视图没有完全绘制，并且您没有获得要绑定函数的所有元素。
ngAfterViewInit() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
Using angulardo it like shown below.
使用 angular执行如下所示。
Keep a click function on the button and bind a property isActiveto the corresponding array element. Then show/hide the accordian based on if isActive has value true/false.
在按钮上保留一个点击函数，并将一个属性绑定isActive到相应的数组元素。然后根据 isActive 的值是否为真/假来显示/隐藏手风琴。
<div *ngFor="let item of data;let i = index;">
<button class="accordion" (click)="toggleAccordian($event, i)"> {{item.parentName}} </button>
<div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive">
<p> {{child.propertyName}} </p>
</div>
</div>
toggleAccordian(event, index) {
var element = event.target;
element.classList.toggle("active");
if(this.data[index].isActive) {
this.data[index].isActive = false;
} else {
this.data[index].isActive = true;
}
var panel = element.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
回答by Souheil Toumi
The Stackblitz update only show the first element in childProperties Item so if u apply the *ngFor on the p tag you will get all the elements of childProperties
Stackblitz 更新仅显示 childProperties Item 中的第一个元素，因此如果您在 p 标签上应用 *ngFor，您将获得 childProperties 的所有元素
<p *ngFor="let child of item.childProperties"> {{child.propertyName}} </p>
