javascript - 如何正确展开多个面板？

Question

我正在使用多个面板，并向 expandAll/collapseAll 面板添加了功能。我的问题是:

让我们说:

1) 我展开所有面板

2) 现在，我折叠仅第二个面板

3) 现在我点击 ExpandAll 按钮(期望所有面板都展开)。

问题:按照上述步骤操作后，我无法展开面板。

这是我的代码:

PLUNKER

<button (click)="collapseAll()">ExpandAll</button>
<button (click)="expandAll()">CollapseAll</button>

Answer 1

这段代码有两个问题:

1. 您只有一个属性负责每个面板的折叠状态。这样就不可能分别控制它们。

2. 您有单向绑定(bind)，因此当您在 View 中手动折叠面板时，模型不会更新。我修复了你的代码并 fork 了 plunker:https://plnkr.co/edit/rfiVj8vEIBDOZ8rIHV5i

主要思想是:

使用动态模板让您的 html 保持干爽:

<p-panel *ngFor="let panel of panels" 
          [header]="panel.name" 
          [toggleable]="true" 
          [(collapsed)]="panel.isCollapsed" <== notice the "banana-in-a-box" notation [()], which allows two-way binding
          [style]="{'margin-bottom':'20px'}">
    {{ panel.text }}
</p-panel>


export class AppComponent {

  panels = [
    {
      name: 'Panel 1',
      isCollapsed: false,
      text: `The story begins as Don Vito Corleone...`
    },
    {
      name: 'Panel 2',
      isCollapsed: false,
      text: `The story begins as Don Vito Corleone...`
    },
    {
      name: 'Panel 3',
      isCollapsed: false,
      text: `The story begins as Don Vito Corleone...`
    },
    {
      name: 'Panel 4',
      isCollapsed: false,
      text: `The story begins as Don Vito Corleone...`
    },
  ] // you can also move this to a separate file and import

  constructor() {
  }

  expandAll(){
    this.panels.forEach(panel => {
      panel.isCollapsed = false;
    });
  }

  collapseAll(){
    this.panels.forEach(panel => {
      panel.isCollapsed = true;
    });
  }
}

更新 如果你不想从你的面板中提取文本，你不必这样做，但在这种情况下你将无法使用 *ngFor 并且你必须将每个面板的状态存储在你的某些数据结构中组件。

你可以有这样的东西:

panelsCollapsed = [
    {
      isCollapsed: false,
    },
    {
      isCollapsed: false,
    },
    {
      isCollapsed: false,
    },
    {
      isCollapsed: false,
    }, // this can also be just an arry of booleans, I kep it as an object in case you want to add other fields to it

然后在您的标记中您将拥有:

<p-panel header="Panel 1" [toggleable]="true" [collapsed]="panelsCollapsed[0].isCollapsed" [style]="{'margin-bottom':'20px'}">
    The story begins as Don Vito Corleone...
</p-panel>
<p-panel header="Panel 2" [toggleable]="true" [collapsed]="panelsCollapsed[1].isCollapsed" [style]="{'margin-bottom':'20px'}">
    The story begins as Don Vito Corleone...
</p-panel>

所有展开/折叠的方法都将保持不变。