html - 具有动态数据的 Angular 8 手风琴，无需使用引导程序/角度材料

Question

我正在尝试在不使用引导/角材料手风琴的情况下实现手风琴功能。我的数据来自 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>

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

标签： htmlcssangular8

Answer 1

您需要为此传递唯一的 ID。

也许它会帮助你。

多个项目的点击事件的角度

请通过它。