Узнайте, открыт аккордеон Bootstrap или нет в Angular 5 - PullRequest
Новая
       8

Узнайте, открыт аккордеон Bootstrap или нет в Angular 5

0 голосов
/ 07 мая 2018

Я пытаюсь показать различные значки в Bootstrap accordion , чтобы указать, открыт он или закрыт в данный момент, но я не уверен, как получить эти данные. 

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" is-open="isOpen" >
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>Some title</span>
      <span class="pull-right">
         <div *ngIf="isopen">
          <fa name="minus"></fa>
        </div>
        <div *ngIf="!isopen">
          <fa name="plus"></fa>
        </div>
      </span>
    </ng-template>
    <ng-template ngbPanelContent>
      Some text
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Примеры не охватывают это, и я нашел только примеры для angular-ui.

Большое спасибо.

Ответы [ 3 ]

0 голосов
/ 26 ноября 2018

Я не уверен, что это лучшее решение, но вы можете использовать, например, свойство 'activeIds', например: 

import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';
...
export class SomeComponent implements OnInit {
@ViewChild('accordion') accordion: NgbAccordion;
data: any[];
...

  isOpen(i): boolean {
     return this.accordion && this.accordion.activeIds.includes(i.toFixed());
  }
...
}

И HTML-шаблон: 

  <ngb-accordion #accordion>
    <ngb-panel *ngFor="let item of data, let i=index" id="{{i}}">
      <ng-template ngbPanelTitle>
         <div class="row">
          <div>{{item.title}}</div>
          <div>
            <span [ngClass]="{'icon-arrow-up': isOpen(i), 'icon-arrow-down': !isOpen(i)}"></span>
          </div>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
       <div>{{item.content}}</div>
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
0 голосов
/ 26 ноября 2018

Другой способ - использовать ваши собственные панели [] и заполнить их в ngInit (), а затем использовать (panelChange) = "beforeChange ($ event)" для инвертирования состояния панели. А затем проверьте свои собственные свойства массива. 

ngOnInit() {
  this.panels = [];
  this.sections.forEach((section, index) => {
     this.panels.push({
      id: index,
      state: false
    });
  });
}

beforeChange(evt) {
  const panel = this.panels.find(p => p.id === toNumber(evt.panelId));
  if (panel) {
    panel.state = !panel.state;
  }
}

isOpen(i){
  const panel = this.panels.find(p => p.id === i);
  if (panel) {
    return panel.state;
  }
  return false;
}

<ngb-accordion #accordion (panelChange)="beforeChange($event)">
  <ngb-panel *ngFor="let section of sections, let i=index" id="{{i}}">
   <ng-template ngbPanelTitle></ng-template>
   <ng-template ngbPanelContent>
    <div *ngIf="isOpen(i)">{{'Panel is open'}}</div>
   </ng-template>
  </ngb-panel>
</ngb-accordion>
0 голосов
/ 07 мая 2018

Вы можете использовать событие panelChange, чтобы узнать, открыта ли панель или нет, событие имеет параметр nextState. Это HTML-код: 

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" (panelChange)="test($event)" >
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>Some title</span>
      <div class="pull-right">
         <div *ngIf="openById['ngb-panel-0']">
          open
        </div>
        <div *ngIf="!openById['ngb-panel-0']">
          close
        </div>
      </div>
    </ng-template>
    <ng-template ngbPanelContent>
      Some text
    </ng-template>
  </ngb-panel>
</ngb-accordion>

И файл ts: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  openById = {};
  test(event){
    this.openById[event.panelId] = event.nextState;
  }
}
...