html - 带有动态数据的 Angular 8 Accordion ，不使用 Bootstrap /Angular Material

Question

我正在尝试在不使用 bootstrap/angular Material Accordion 的情况下实现 Accordion 功能。我的数据来自 API。

我尝试执行以下操作，但会同时打开和关闭所有面板。我了解其背后的原因，但我不了解如何处理。

组件.ts

export class AccordionComponent implements OnInit {
    isHidden = true;
    mFaqs: IFaq[];
    constructor(private faqService: FaqService) { }

    ngOnInit() {
        this.faqService.getFaqs()
            .subscribe(faqData => this.mFaqs = faqData );
    }

}

组件.html

<div class="custom-header" hideToggle="true" (click)="isHidden = !isHidden" *ngFor="let faq of mFaqs?.faqs">
    <section>
        <section>
            Q: {{ faq.question }}
        </section>
        <p [hidden]="isHidden">
            {{ faq.answer }}
        </p>
    </section>

</div>

它应该只关闭/打开点击的那个。

Answer 1

您需要为此传递唯一 ID。

也许它会对你有所帮助。

Angular on click event for multiple items

请仔细阅读。