Разборная гармошка в угловых - PullRequest
Новая
       5

Разборная гармошка в угловых

0 голосов
/ 19 ноября 2018

Я делаю аккордеон, чтобы сделать разборный div, используя javascript в угловом приложении.

Для которого, если его не открывается, нажмите на кнопку на 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";
        }
      });
    }
  }

}

Примечание: Как я новичокв угловом я делаю это с помощью javascript способом .. Поэтому, пожалуйста, помогите мне достичь результата, используя чисто угловой и машинописный текст ..

Работающий stackblitz https://stackblitz.com/edit/angular-lp3riw

В демонстрации вы можете видеть, что родительская кнопка видна, но если вы нажмете на кнопку, она не будет развернута.

Также перечислены рабочие складные кнопки ниже со статическими значениями ..

Как сделать складной аккордеон, как и при заданных статических значениях стекаблиц, используя угловой и машинописный способ (без каких-либо сторонних или jquery) ..

1 Ответ

0 голосов
/ 19 ноября 2018

Сохраните вашу функцию в 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";
        }
      });
    }
  }

С помощью углового сделайте это, как показано ниже.

Сохраните функцию нажатия на кнопку и привяжите свойство isActive к соответствующему элементу массива.Затем показать / скрыть аккордеон, основываясь на том, имеет ли 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";
      }
  }
...