PrimeNG Accordion 一键全展开/全折叠时折叠失效问题咨询

• 需求：通过单个按钮控制PrimeNG Accordion组件所有面板统一展开/折叠
• 异常表现：展开逻辑可正常运行，折叠逻辑失效
• 调试结果：触发折叠操作时，tab.selected属性已被正确设置为false，但对应面板始终无法正常关闭
• 原有实现代码：

openCloseAllProjectStatusTabs(requestToOpen: boolean) {
  if (this.projectStatusTabs !== undefined && this.projectStatusTabs != null){
    this.projectStatusTabs.forEach(tab => tab.selected = requestToOpen);
    this.expanded = requestToOpen;
  }
}

直接遍历修改tab对象的selected属性，无法触发PrimeNG Accordion组件内部的状态更新：

• PrimeNG的AccordionTab组件的selected是@Input输入属性，直接修改tabs数组内对象的属性值，不会触发组件的ngOnChanges生命周期，组件不会执行面板折叠对应的DOM更新、动画触发逻辑
• 展开操作能生效是因为面板默认初始状态为折叠，从默认未激活到选中的状态变更刚好能被组件捕获，而已展开面板被修改selected为false的操作无法被组件感知，所以始终保持展开状态。

方案1：调用Accordion组件内置方法（推荐） #

PrimeNG的p-accordion组件本身自带openAll()和closeAll()方法，不需要手动遍历修改tab属性，兼容性和稳定性最高。

1. 首先在组件类中通过@ViewChild获取Accordion实例：

import { Accordion } from 'primeng/accordion';

// 对应模板里的accordion模板引用变量
@ViewChild('accordionRef') accordion: Accordion;

2. 模板里给p-accordion标签加模板引用，同时开启多面板模式：

<!-- 必须加[multiple]="true"才支持多面板同时展开 -->
<p-accordion #accordionRef [multiple]="true">
  <!-- 业务自定义的p-accordionTab内容 -->
</p-accordion>

3. 修改原来的统一控制方法：

openCloseAllProjectStatusTabs(requestToOpen: boolean) {
  if (!this.accordion) return;
  requestToOpen ? this.accordion.openAll() : this.accordion.closeAll();
  this.expanded = requestToOpen;
}

方案2：手动触发变更检测（无需修改模板结构时使用） #

如果不想新增模板引用、获取组件实例，可以在修改完tab属性后，手动触发Angular变更检测，强制组件刷新状态：

1. 注入变更检测服务：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

2. 修改控制方法，改完属性后手动触发检测：

openCloseAllProjectStatusTabs(requestToOpen: boolean) {
  if (this.projectStatusTabs !== undefined && this.projectStatusTabs != null){
    this.projectStatusTabs.forEach(tab => tab.selected = requestToOpen);
    this.expanded = requestToOpen;
    // 强制触发组件变更检测
    this.cdr.markForCheck();
  }
}

注意：该方案仅适用于Accordion面板通过*ngFor遍历projectStatusTabs生成的场景，如果是写死的静态面板，请使用方案1。

内容的提问来源于stack exchange，提问作者bonkhead128