javascript - Kollapsbar trekkspillmeny i Angular

Jeg lager et trekkspill for å lage en sammenleggbar div ved hjelp av JavaScript i en Angular-applikasjon..

For hvilket det ikke åpner når man klikker på knappen på Parent One eller noe annet foreldrenavn..

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

}

Merk: Siden jeg er ny i Angular, lager jeg det på JavaScript-måten.. Så vær så snill å hjelp meg med å oppnå resultatet ved å bruke ren Angular og TypeScript..

Arbeidende stackblitz https://stackblitz.com/edit/angular-lp3riw

Du kan se i demoen at foreldrekoblingen er synlig, men hvis du klikker på knappen, utvides den ikke.

Også listet opp fungerende sammenleggbart knapp nedenfor med statiske verdier..

Hvordan lage en sammenleggbar akkordeon som de gitte Stackblitz-statiske verdiene ved bruk av Angular og TypeScript (uten noen tredjepart eller jQuery)..

Svar #1

Hold funksjonen din i ngAfterViewInit i stedet for ngOnInit. Se oppdatert stackblitz

Problemet er at på ngOnInit er ikke visningen fullstendig tegnet, og du får ikke alle elementene som du ønsker å binde funksjonen til.

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

Ved å bruke Angular, gjør det som vist nedenfor.

Behold en klikkfunksjon på knappen og bind en egenskap isActive til det tilsvarende elementet i arrayen. Vis/skjul deretter akkordeonen basert på om isActive har verdien 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";
      }
  }

Svar #2

Stackblitz-oppdateringen viser kun det første elementet i childProperties Item, så hvis du bruker *ngFor på p-tagen, vil du få alle elementene i childProperties

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

Relaterte artikler