角形自定义手风琴组件在单击时不会展开 [英] Angular custom accordion component doesn't expand on clicking

问题描述

我已经在angular 9中创建了一个自定义手风琴组件.但这是我面临的一个问题.每次单击手风琴时，它只会扩展第一个按钮窗口.其余的其他窗口则不会展开或折叠.

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.

为了更好地重现该问题，我在此处附加了StackBlitz链接:

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

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

我的代码:

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

Ts

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

推荐答案

原因是您在模板中有多个模板引用变量实例.而且您正在组件类内部使用ViewChild，它将每次仅访问第一个孩子.

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.

您必须使用ViewChildren，它可以访问所有手风琴图标的数组.然后，您可以根据需要对其进行处理.

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

您需要在代码中进行的更改:

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

请在此处找到stackblitz实例: https://stackblitz.com/edit/angular-nusunu

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

这篇关于角形自定义手风琴组件在单击时不会展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！