Angular custom accordion component doesn't expand on clicking

问题

I have created a custom accordion component in angular 9. But an issue I'm facing. Every time I click on the accordion, it only expands the first button window. Rest other windows don't expand or collapse.

For a better reproduction of the issue I have attached my StackBlitz link here:

https://stackblitz.com/edit/angular-x4jjxr

My code:

html

<div *ngFor="let item of faq">
    <button #el class="accordion" (click)="toggleHelper()">
        <slot name="header">{{ item.question }}</slot>
    </button>
    <div class="panel">
        <slot name="details">
            {{ item.answer }}
        </slot>
    </div>
</div>

css

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active,
.accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: "\002B";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

  import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

faq: FAQ = [
    {'question': 'one', 'answer': 'Sentence 1'},
    {'question': 'two', 'answer': 'Sentence 1'},
  {'question': 'three', 'answer': 'Sentence 1'},
];

    @Input() icon = "arrow";
    @ViewChild("el", { read: ElementRef }) el: ElementRef;

    constructor() {}


    ngOnInit(): void {

    }


    toggleHelper() {
        this.el.nativeElement.classList.toggle("active");
        const panel = this.el.nativeElement.nextElementSibling;
        if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    }
}

回答1:

The reason is you have multiple instances of template reference variables inside the template. And you are using ViewChild inside the component class which will access only the first child every time.

You have to use ViewChildren which will give access to array of all the accordion icons. You can then handle it as you want.

Changes you need to do in code:

<div *ngFor="let item of faq; let i = index;">
    <button #el class="accordion" (click)="toggleHelper(i)">
        <slot name="header">{{ item.question }}</slot>
    </button>
    <div class="panel">
        <slot name="details">
            {{ item.answer }}
        </slot>
    </div>
</div>

@ViewChildren("el", { read: ElementRef }) el: QueryList<ElementRef>;

toggleHelper(i: number) {
    this.el.toArray()[i].nativeElement.classList.toggle("active");
    const panel = this.el.toArray()[i].nativeElement.nextElementSibling;
    if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
    } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
    }
}

Please find stackblitz instance here:https://stackblitz.com/edit/angular-nusunu

来源：https://stackoverflow.com/questions/61556042/angular-custom-accordion-component-doesnt-expand-on-clicking

标签

angular

typescript