Question

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

 <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

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分叉。

Answer 2

在@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.

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

2 个答案: