Angular 8 个带动态数据的手风琴，不使用 bootstrap/angular material

Question

我试图在不使用 bootstrap/angular material 手风琴的情况下实现手风琴功能。我的数据动态来自 api.

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

Component.ts

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

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

}

component.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>

应该只有 close/open 被点击的那一个。

Answer 1

您需要为此传递唯一 ID。

也许它会对你有所帮助。

请仔细阅读。

Angular 8 个带动态数据的手风琴，不使用 bootstrap/angular material

Angular 8 accordion with Dynamic data without using bootstrap/angular material

html

css

angular8