我有动态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> <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;
}
}