angular 中的可折叠手风琴

Question

我正在制作手风琴以在 angular 应用程序中使用 javascript 制作可折叠的 div..

为此，如果单击 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:

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

}

注意： 因为我是 angular 的新手，所以我正在用 javascript 的方式制作它。所以请帮助我使用 纯angular和打字稿..

工作 stackblitz https://stackblitz.com/edit/angular-lp3riw

您可以在演示中看到父按钮是可见的，但是如果您单击该按钮，它不会展开..

还在下面列出了具有静态值的工作可折叠按钮..

如何使用 angular 和打字稿方式（没有任何第三方或 jquery）像给定的 stackblitz 静态值一样制作可折叠手风琴..

Answer 1

将函数保留在 ngAfterViewInit 而不是 ngOnInit 中。查看更新 stackblitz

问题是在 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";
        }
      });
    }
  }

使用 angular 如下所示。

在按钮上保留一个点击功能，并绑定一个属性isActive到对应的数组元素。那么 show/hide 基于 if isActive 的手风琴有值 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";
      }
  }

Answer 2

Stackblitz 更新仅显示 childProperties 项中的第一个元素，因此如果您在 p 标签上应用 *ngFor，您将获得 childProperties 的所有元素

<p *ngFor="let child of item.childProperties"> {{child.propertyName}} </p>

angular 中的可折叠手风琴

Collapsible accordion in angular

html

javascript

accordion

typescript

angular