html - PrimeNG Accordion 展开全部/折叠全部

Question

我正在寻找一种用一个按钮打开和关闭整个 Accordion 的方法。现在我正在这样做。目前只有扩展有效，但由于某种原因崩溃不起作用。我检查了一下，tab.selected 在折叠时设置为 False，但它不会关闭

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

Answer 1

我没有测试这段代码，但我认为您所需要的只是为 p-accordion 提供 multiple 标志。然后，您需要做的就是一个 isExpanded 值，该值将使用 selected 输入控制所有选项卡。

app.component.html

<p-accordion [multiple]="true">
  <p-accordionTab header="Header 1" [selected]="isExpanded">
    <p>
      Content 1
    </p>
  </p-accordionTab>
  <p-accordionTab header="Header 2" [selected]="isExpanded">
    <p>
     content 2
    </p>
  </p-accordionTab>
  <p-accordionTab header="Header 3" [selected]="isExpanded">
    <p>
      content 3
    </p>
  </p-accordionTab>
</p-accordion>

<button (click)="isExpanded = !isExpanded">Toggle</button>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 

  private _isExpanded = false;
  
  public get isExpanded() {
    return this._isExpanded;
  }

  public set isExpanded(value: boolean) {
     this._isExpanded = value;
  }
}