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 属性来解决这个问题。相反，我只是使用视图子。

<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;

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

ngx-bootstrap accordion isOpen and isOpenChange causing hang

ngx-bootstrap

angular