PrimeNG Accordion 无法正常工作和显示答案

【问题标题】：PrimeNG Accordion doesn't work and display properlyPrimeNG Accordion 无法正常工作和显示
【发布时间】：2019-01-07 01:41:40
【问题描述】：

我正在尝试根据official documentation 使用 primeNG Accordion

这是我的代码：

<p-accordion [multiple]="true">
    <p-accordionTab header="Godfather I">
        The story begins  as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, but does not intend to become part of his father's business. T hrough Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
    </p-accordionTab>
    <p-accordionTab header="Godfather II">
        Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.
   </p-accordionTab>
    <p-accordionTab header="Godfather III">
        After a break of more than  15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone, now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.
    </p-accordionTab>
</p-accordion>

我确保 import { AccordionModule } from 'primeng/accordion' 和 import AccordionModule 在 app.module.ts 中

问题 #1：我遇到了一个错误：ERROR Error: "Found the synthetic listener @tabContent.done. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application."

我真的需要包含BrowserAnimationsModule 或NoopAnimationsModule 吗？官方文档中没有提到

问题#2：我添加了NoopAnimationsModule，现在问题消失了，但显示效果很糟糕。

似乎手风琴内容和标题重叠：

一个选项卡处于活动状态：

请帮忙。如果有任何误用，请随时纠正我。提前谢谢！

【问题讨论】：

对于问题 #1，来自 primeNg 设置指南：“...您需要将 BrowserAnimationsModule 导入您的应用程序。如果您不想使用 NoopAnimationsModule。”跨度>
您是否安装了primeng.css 和其中一个theme.css？
对于问题 #2，样式显然不同于 primeNg 默认样式。你自定义了 CSS 吗？如果是这样，请将 CSS 放入您的问题中。
没有看到 css，我最好的猜测是你有一个设置 overflow 的选择器，它覆盖了 primeNg 自己的类。
感谢大卫和丹尼尔。是的，你是对的。问题出在css中。我不认为primeng.min.css 是依赖项。谢谢你指出。现在它正在工作。

标签： css angular angular6 primeng

【解决方案1】：

感谢评论区的 David 和 Daniel。

对于问题 #1：是的，我需要导入 BrowserAnimationsModule

对于问题 #2：primeng.min.css 丢失。我必须在 angular.json 中添加“/node_modules/primeng/resources/primeng.min.css”

【讨论】：

【解决方案2】：

内容未隐藏的问题是因为您的页面中没有包含primeng.css，PrimeNG 组件会自动将一组固定的 css 类应用于其组件，在您的情况下，这是以下类负责隐藏手风琴面板的内容：

.ui-accordion-content-wrapper-overflown {
    overflow: hidden;
}

【讨论】：