如何获取isOpen每个手风琴标题唯一

时间:2018-08-13 22:36:38

标签: ngx-bootstrap

我正在尝试用+或-样式设置手风琴标题,具体取决于手风琴是否打开。我遇到的问题是,即使每个手风琴都单独打开,我也无法获得个人风格。因此,如果一个是开放的,它们都被标记为开放(都有负号)。

模板:

<accordion [closeOthers]=true>
  <accordion-group *ngFor="let activity of activities"
                   (isOpenChange)="openStatusChange($event)" 
                   [panelClass]="customPanelClass">
    <div accordion-heading (click)="openPanel(activity)">

      <div *ngIf="isOpen" class="glyphicon glyphicon-minus">&nbsp;<span style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">{{activity.Name}}</span></div>
      <div *ngIf="!isOpen"class="glyphicon glyphicon-plus">&nbsp;<span style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">{{activity.Name}}</span></div>

    </div>

    <p> Internal accordion stuff ... </p>

  </accordion-group>
</accordion>

组件:

export class AccordianComponent implements OnInit, OnChanges {
  activities: ActivityType[];
  chemicals: Chemical[];
  isOpen: boolean = false;
  customPanelClass: string = "panel panel-info";

  constructor(
    private _activityService: ActivityService,
    private _chemicalService: ChemicalService
  ) { }

  ngOnInit() {
    this.getActivities();
  }

  openStatusChange(event: boolean) {
    this.isOpen = event;
  }
 }

0 个答案:

没有答案