Angular 2材料设计<mat-expansion-panel>展开全部/折叠全部

Question

我想在 Angular 2 Material 中实现“全部展开”和“全部折叠”。有人可以给个思路吗？如何实现？

- Honey

---

也许可以使用扩展面板？否则，我们不能替你完成工作，请提供一些代码和/或你已经尝试过的内容。 - user4676340

是的，这个扩展面板只有一个，但我有一个切换按钮可以展开所有/折叠所有。 - Honey

可能是在Angular 4中使用Angular Material扩展表格行的重复问题。 - John

Answer 1

1- 若要允许展开多个面板，您应该移除mat-accordion。

2- 使用expanded参数同时更改多个状态。

这里有一个正在运行的示例。

编辑

从版本6.0.0-beta-0开始，您可以使用multi参数以及openAll和closeAll函数：

1- 更改mat-accordion元素以将muti设置为true并获取MatAccordionComponent实例：

<mat-accordion #accordion="matAccordion" [multi]="true">

2- 然后使用openAll和closeAll函数打开或关闭所有面板：

<button (click)="accordion.openAll()">Expand All </button>
<button (click)="accordion.closeAll()">Collapse All </button>

这里有一个运行的例子。

- ibenjelloun

---

这个代码不适用于版本7。需要将multi设置为true以使用accordin。 - Sreekumar P

仍在使用版本7：https://stackblitz.com/edit/stackoverflow-49230894-2，同时具有多个选项的手风琴也可以正常工作：https://stackblitz.com/edit/stackoverflow-49230894-3。我将在我的帖子中编辑多个解决方案。 - ibenjelloun

Answer 2

来源 链接

对于最新版的 Angular material 8

模板

<button mat-flat-button color="primary" (click)="openAllPanels()"><b>Open Panels</b></button> &nbsp;
<button mat-flat-button color="primary" (click)="closeAllPanels()"><b>Close Panels</b></button>

<mat-accordion [multi]="true"
#accordion="matAccordion"
>
  <mat-expansion-panel 
  #mapanel="matExpansionPanel"
  >
    <mat-expansion-panel-header>
        <b>Title</b>
    </mat-expansion-panel-header>
    <p>Description</p>
    <mat-action-row>
        <button mat-flat-button (click)="mapanel.close()">Click to close</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

组件

import { MatAccordion } from '@angular/material';

...
...

@ViewChild('accordion',{static:true}) Accordion: MatAccordion


...

...

closeAllPanels(){
    this.Accordion.closeAll();
}
openAllPanels(){
    this.Accordion.openAll();
}


...
...  

- Code Spy

---

如果我将static属性设置为true，它对我没有起作用。自从Angular Material 8.2.3以后必须设置为false。请翻译此内容。 - liqSTAR

如果您在mat-accordion中添加[multi] =“true”，则您的答案将起作用并且会更加完整和优秀。 - Rahimjon Rustamov

Answer 3

使用切换按钮（而不是像ibenjelloun的答案一样使用2个按钮），可以在模板中使用以下内容：

```html {{ allExpandState ? "折叠全部" : "展开全部" }} ```

并在组件中添加以下内容：

```typescript toggleExpandState() { this.allExpandState = !this.allExpandState; } ```

这会引入一个问题，即如果手动展开所有面板，则按钮仍将显示“展开所有”，反之亦然。因此，您可以在展开/折叠单个面板时添加一个监听器来检查是否展开或折叠了所有面板，并相应地更改变量`allExpandState`。

此外，您无需删除`mat-accordian`，只需向其添加`multi="true"`即可。

- Russell Chisholm