有角度的可折叠手风琴 [英] Collapsible accordion in angular
问题描述
我正在制作手风琴以在 Angular 应用程序中使用 javascript 制作可折叠的 div..
如果它没有打开，点击Parent One或任何其他父名称上的按钮..
HTML:
<button class="accordion">{{item.parentName}} </button><div class="panel" *ngFor="let child of item.childProperties"><p>{{child.propertyName}} </p>Ts:
import { Component, OnInit } from '@angular/core';@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {数据:任何=[{"parentName": "父母一",子属性":[{ "propertyName": "Property One" },{ "propertyName": "属性二" }]},{"parentName": "父母二",子属性":[{ "propertyName": "属性三" },{ "propertyName": "属性四" },{ "propertyName": "属性五" },]},{"parentName": "父母三",子属性":[{ "propertyName": "属性六" },{ "propertyName": "属性七" },{ "propertyName": "属性八" },]}]ngOnInit() {var acc = document.getElementsByClassName("accordion");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener("点击", function () {this.classList.toggle("active");var panel = this.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight + "px";}});}}}注意:由于我是 angular 新手，所以我正在使用 javascript 方式制作它.所以请帮助我使用 pure angular 和 typescript 来实现结果..
工作 stackblitz https://stackblitz.com/edit/angular-lp3riw
您可以在演示中看到父按钮可见，但如果您单击该按钮，它不会展开..
还在下面列出了带有静态值的工作可折叠按钮..
如何使用 angular 和 typescript 方式(没有任何第三方或 jquery)像给定的 stackblitz 静态值一样制作可折叠的手风琴..
将函数保留在 ngAfterViewInit 而不是 ngOnInit.查看更新的stackblitz
问题是在 ngOnInit 上，视图没有完全绘制，并且您没有获得要绑定函数的所有元素.
ngAfterViewInit() {var acc = document.getElementsByClassName("accordion");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener("点击", function () {this.classList.toggle("active");var panel = this.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight + "px";}});}}使用 angular 如下所示.
在按钮上保留一个点击函数，并绑定一个属性isActive到对应的数组元素.然后根据 isActive 的值是否为 true/false 显示/隐藏手风琴.
<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>切换手风琴(事件，索引){var element = event.target;element.classList.toggle("active");if(this.data[index].isActive) {this.data[index].isActive = false;} 别的 {this.data[index].isActive = true;}var panel = element.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight + "px";}}
I am making accordion to make a collapsible div using javascript in angular application..
For which if its not getting open on click over the button on Parent One or any other parent name..
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:
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..
Working 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)..
Keep your function in ngAfterViewInit instead of ngOnInit. See updated stackblitz
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.
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 angular do it like shown below.
Keep a click function on the button and bind a property isActive to the corresponding array element. Then show/hide the accordian based on if isActive has value true/false.
<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";
}
}
这篇关于有角度的可折叠手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
