使用角度4和ngb-accordion中的id设置div的类名

时间:2018-04-09 14:00:37

标签: html5 angular angular5 bootstrap-accordion

我有动态id的ngb-accordion。在ng-template中,我有div,根据ngbPanelTitle的状态改变类名,如果它打开或不打开。现在,当单击行时,每行现在都会更改为同一个类。如何更改所选标题/行的[class] =“className”的类名?

以下是手风琴

<ngb-accordion [closeOthers]="true" (panelChange)="toggleAccordian($event)">
        <div *ngFor="let item of store.items">
            <ngb-panel id="static-{{item.id}}">
                <div class="accordion-head">
                    <ng-template class="super" ngbPanelTitle>
                        <div class="row heads">
                            <div class="col-sm">
                                <div [class]="className" id="static-{{item.id}}" #someVar></div> &nbsp;<b>{{item.description}}</b>
                            </div>
                            <div class="col-sm"> {{item.summary}}</div>
                            <div class="col-sm"> {{item.person}}</div>
                            <div class="col-sm"> {{item.date | date: 'yyyy/MM/dd hh:mm a' }}</div>
                        </div>
                    </ng-template>
                </div>
                <ng-template ngbPanelContent>
                    <b>Summary :</b> {{item.summary}}
                </ng-template>
            </ngb-panel>
        </div>
    </ngb-accordion>

然后我的角度代码

    export class HistoryGridComponent implements OnInit {
  options: GridOptions;
  id: number;
  panelState: boolean;
  className: any;

  constructor(private route: ActivatedRoute, private router: Router, public store: MyStore) {
  }

  ngOnInit() {
      this.route.paramMap
          .map((params: ParamMap) => params.get('id'))
          .subscribe(id => {
              this.id = parseInt(id, 10);
              this.className = this.setClass();//set classname on page load
          });

  }

    //on click of the title this get fired
  public toggleAccordian(props: NgbPanelChangeEvent): void {
      this.panelState = props.nextState; // true === panel is toggling to an open state 
      // false === panel is toggling to a closed state
     props.panelId;    // the ID of the panel that was clicked

          this.className = this.setClass();

  }


    setClass() {
       this.className = this.panelState ? 'spriteUp' : 'spriteDown';
      return this.className;
  }
}

0 个答案:

没有答案