ngx-bootstrap手风琴isOpen和isOpenChange导致挂起

Question

我可能在这里做一些愚蠢的事情。我有多个团体的手风琴。当一个打开时，另一个应关闭，并且对一个执行了操作后，下一个将打开。您显然可以回去（像步进一样）。

基本格式是这样：

<accordion closeOthers="1">
    <accordion-group (isOpenChange)="state.categoriesOpen = !state.categoriesOpen"
        [isDisabled]="!categories?.length"
        [isOpen]="state.categoriesOpen">
        <div class="btn btn-link"
            accordion-heading>
            <span>1.
                <span *ngIf="!chosenCategory || !criteria"> Choose category</span>
                <span *ngIf="chosenCategory && criteria"> Category | <b>{{chosenCategory?.name}}</b></span>
            </span>
            <mat-icon>{{ state.categoriesOpen ? 'expand_less' : 'expand_more' }}</mat-icon>
        </div>

        <!-- some content here -->
    </accordion-group>
</accordion>

在我的代码中，我定义了这个状态对象：

state: any = {
    categoriesOpen: true,
    criteriaOpen: false,
    attributesOpen: false,
    formulasOpen: false,
};

默认情况下，第一个组是打开的。但是由于某种原因，它会永远挂在这里。当我删除[isOpen]时，它起作用。

有人知道为什么这是坏的吗？

Answer 1

我不知道我是否完全了解您想要什么，但是让我们看一下示例：

<div class="content">
<accordion closeOthers="1">
<accordion-group #p1 (isOpenChange)="isP1Open = !isP1Open"
    [isDisabled]="!categories?.length"
    [isOpen]="isP1Open">
    <div class="btn btn-link"
        accordion-heading>
        <span>1.
            <span *ngIf="!chosenCategory || !criteria"> Choose category</span>
            <span *ngIf="chosenCategory && criteria"> Category | <b>{{chosenCategory?.name}}</b></span>
        </span>
    </div>
    <button (click)="open(2)">Open panel 2</button>
</accordion-group>
<accordion-group #p2 (isOpenChange)="isP2Open = !isP2Open"
    [isDisabled]="!categories?.length"
    [isOpen]="isP2Open">
    <div class="btn btn-link"
        accordion-heading>
        <span>2.
            <span *ngIf="!chosenCategory || !criteria"> Choose category</span>
            <span *ngIf="chosenCategory && criteria"> Category | <b>{{chosenCategory?.name}}</b></span>
        </span>
    </div>
    <button (click)="open(1)">Open panel 1</button>
</accordion-group>

和相应的代码

import { ViewChild, Component } from '@angular/core';
import { AccordionPanelComponent } from 'ngx-bootstrap/accordion';

 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    @ViewChild('p1') p1: AccordionPanelComponent;
    @ViewChild('p2') p2: AccordionPanelComponent;
    public isP1Open: boolean = false;
    public isP2Open: boolean = true;

    public state: any = {
      categoriesOpen: true,
      criteriaOpen: false,
      attributesOpen: false,
      formulasOpen: false,
    };
    public categories: any = [ {name: "test2"}];

    public chosenCategory:any = {name: "test2"}

    public criteria:any = "whatever";

    open(panelNum) {
      const panel = this[`p${panelNum}`];
      panel.isOpen = !panel.isOpen;
    }
}

这样，您可以逐步浏览手风琴组。我希望这可以帮助您实现目标。请参见此处的示例：https://stackblitz.com/edit/ngx-bootstrap-accordion-panels-lkubjq

Answer 2

我通过删除isOpen和isOpenChange属性来解决这个问题。相反，我只是使用view child。

<accordion closeOthers="1">
    <accordion-group #categoryGroup
        [isDisabled]="!categories?.length">
        <div class="btn btn-link"
            accordion-heading>
            <span>1.
                <span *ngIf="!chosenCategory || !criteria"> Choose category</span>
                <span *ngIf="chosenCategory && criteria"> Category | <b>{{chosenCategory?.name}}</b></span>
            </span>
            <mat-icon>{{ categoryGroup.isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>
        </div>

        <!-- body -->
    </accordion-group>
<accordion>

然后在代码中，我只是这样做：

@ViewChild('categoryGroup', { static: false }) categoryGroup: AccordionPanelComponent;
@ViewChild('criteriaGroup', { static: false }) criteriaGroup: AccordionPanelComponent;
@ViewChild('attributeGroup', { static: false }) attributeGroup: AccordionPanelComponent;
@ViewChild('formulaGroup', { static: false }) formulaGroup: AccordionPanelComponent;

ngOnInit() {
    this.categoriesSubs = this.selectorService.categories.subscribe(categories => {
        if (!categories) return;
        this.categories = categories;
        this.categoryGroup.isOpen = true;
    });
}

当我想打开任何其他组时，我可以这样称呼它为viewChild：

this.criteriaGroup.isOpen = true;