如何使用 ng-bootstrap 一次显示/折叠所有手风琴面板

Question

使用 ng-bootstrap 手风琴模块，默认情况下它工作正常。尝试自定义切换功能，该功能将在单击按钮时立即显示/折叠。

经过一番调试，现在实现了功能。想要确定方法是否好。

这是我尝试过的：

笨蛋演示

成分：

    import { Component, ElementRef } from '@angular/core';
import {NgbAccordionConfig,NgbPanelChangeEvent} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-accordion-basic',
  templateUrl: 'src/accordion-basic.html',
  providers: [NgbAccordionConfig]
})
export class NgbdAccordionBasic {
  constructor(public config: NgbAccordionConfig, public elementRef: ElementRef) {
    // customize default values of accordions used by this component tree
    this.config.closeOthers = false;
  }
  toggle(event: NgbPanelChangeEvent, acc: NgbAccordion){
      if(acc.activeIds.length > 0){
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = false;
        acc.activeIds.pop(val.id);
        });
      } else {
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = true;
        acc.activeIds.push(val.id);
      });
      }

  }
}

HTML：

<button (click)="toggle($event, acc);">Toogle all accordions</button>
<ngb-accordion #acc="ngbAccordion">
  <ngb-panel title="Simple" id="ngb-panel-0">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel id="ngb-panel-1">
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel title="last" id="ngb-panel-2">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Answer 1

首先，以 开头的变量_是私有的并且没有记录。你不应该尝试使用它们。其他未记录的属性panels也不应该使用。

NgbAccordion 有一个记录在案的 activeIds 属性，它允许告诉哪些面板应该处于活动状态。所以就用它吧。为所有面板分配一个 id：

<ngb-panel title="Simple" id="ngb-panel-0">

（其他人也一样，带有递增计数器）

然后，单击按钮，检查是否activeIds为空。如果是，则设置activeIds为包含所有 ID 的数组。否则，将其设置为空数组。

toggle(acc: NgbAccordion) {
  if (acc.activeIds.length) {
    acc.activeIds = [];
  }
  else {
    acc.activeIds = [0, 1, 2].map(i => `ngb-panel-${i}`);
  }
}

演示