這是我的 HTML 頁面，它具有如下所示的動態切換。
<tr align="center" *ngFor="let section of sectionList ; let RowIndex = index;">
<td colspan="6">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered bg-white">
<tr>
<td><button (click)="checkUncheck(RowIndex)" data-toggle="collapse" [attr.data-target]="'#SectionDemo' RowIndex"
class="accordion-toggle" class="btn btn-default btn-xs"><span
class="glyphicon glyphicon-eye-open"></span> </button>
</td>
<td>{{section.sectionName}} {{RowIndex}}</td>
</tr>
<tr>
<td colspan="6">
<div class="hiddenRow">
<div class="accordian-body collapse" [attr.id]="'SectionDemo' RowIndex">
yeah man test {{RowIndex}}
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
現在的事情是我想讓打字稿中的打開/關閉為真偽，到目前為止我所做的是。
checkUncheck(event){
console.log(event);
setInterval(j => {
const domElement = this.elementRef.nativeElement.querySelector(`#SectionDemo` event);
console.log(domElement);
clearInterval();
}, 1500);
}
現在我得到的結果是這樣的。
<div _ngcontent-khl-c237="" class="accordian-body collapse show" id="SectionDemo0" style=""> yeah man test 0 </div>
從console.log(domElement);
現在開始，我想在沒有setInterval的情況下獲得，所以我至少可以accordian-body collapse show從打開/關閉中設定為真/假。
uj5u.com熱心網友回復：
指令 [ngClass]
腳本：
isCollapsed = true
toggleCollapsed() {
this.isCollapsed = !this.isCollapsed
}
getAccordionStyle(event) {
return isColapsed ? 'collapsed' : 'not-collapsed'
}
模板：
<div (click)="toggleCollapsed()">Some accordion item... </div>
<div [ngClass]="getAccordionStyle()"> Your collapsed content here... </div>
CSS：
.collapsed {
display: none;
/* Your collapsed styling */
}
.not-collapsed {
/* Your styling when not collapsed */
}
結構指令 *ngIf
腳本：
isExpanded = false
toggleCollapsed() {
this.isExpanded = !isExpanded
}
模板：
<div (click)="toggleCollapsed()">Some accordion item... </div>
<div *ngIf="isExpanded"> Your collapsed content here... </div>
這是Stackblitz的一個基本示例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493804.html