ngx- bootstrap гармошка isOpen и isOpenChange вызывают зависание - PullRequest
Новая
       5

ngx- bootstrap гармошка isOpen и isOpenChange вызывают зависание

0 голосов
/ 08 января 2020

Я, вероятно, делаю что-то глупое здесь. У меня есть аккордеон с несколькими группами. Когда один из них открыт, остальные должны закрыться, а когда над одним выполнено действие, открывается следующий. Очевидно, вы можете go вернуться (как степпер).

Базовый c формат таков: 

<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] , он работает.

Кто-нибудь знает, почему это сломано?

Ответы [ 2 ]

0 голосов
/ 08 января 2020

Я получил это, чтобы работать, удаляя атрибуты isOpen и isOpenChange . Вместо этого я просто использовал представление 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;
    });
}

И когда я хотел открыть любую другую группу, я мог просто назвать ее вид ребенка такой: 

this.criteriaGroup.isOpen = true;
0 голосов
/ 08 января 2020

Не знаю, правильно ли я понял, что вы хотите, но давайте посмотрим на пример: 

<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

...