如何在 PrimeNG 中折叠/展开多个面板？

Question

我有多个面板和 2 个按钮。一个按钮将它们全部展开，另一个按钮将它们全部折叠。我无法展开或折叠它们。有谁知道如何做到这一点？这是我的代码。提前谢谢！

PLUNKER

 <p-panel header="Panel 1" [toggleable]="true" [style]="{'margin-bottom':'20px'}">

  The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
  His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
  Through 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-panel>

Answer 1

在@match 回答之后，您必须用'()' 指示折叠的属性，否则它在第一次触发后将不起作用。

所以它看起来像这样：

<p-panel header="Panel 4" [toggleable]="true" [(collapsed)]="collapsed" [style]="{'margin-bottom':'20px'}">
    Some text
</p-panel>

可能有点晚了，但你知道的。

Here is where they introduced those changes.

Answer 2

PrimeNG 面板有许多属性 - 其中之一是 collapsed 这默认为 false 但可以设置为变量，然后有一个按钮，单击它可以切换变量的状态：

app.component.ts

export class AppComponent {
  collapsed = false
}

app.template.html

<p-panel header="Panel 4" [toggleable]="true" [collapsed]="collapsed" [style]="{'margin-bottom':'20px'}">
Some text
</p-panel>
<!-- To toggle the state, set the button like this -->
<button (click)="collapsed = !collapsed">Toggle</button>
<!-- to have separate buttons, do this -->
<button (click)="collapsed = true">Collapse</button>
<button (click)="collapsed = false">Expand</button>

只需将此属性绑定到您想要全局折叠的任何面板上的按钮控件的变量。

如果您还想隐藏每个窗格的单独折叠按钮，您可以设置以下样式：

.ui-panel-titlebar-toggler { display:none; }

Working example 来自您的 plnkr。