After experimenting with Angular, I decided to incorporate an accordion feature into my table where each row expands to display additional information. However, I am encountering some issues. How can I resolve this?
Typescript Code
constructor(
...
protected labarugiReport: ReportLabarugiService
) { }
ngOnInit(){}
...
isActive(id) {
return this.selected === id;
}
async getSub(id:any){
this.selected = (this.selected === id ? null : id);
let dateEnd = new Date(this.dateEnd.value);
let dateStart = new Date(this.date.value);
this.itemSoldSub3 = await this.labarugiReport.getReoportListSoldItemByCategoryAll(this.user.principle.id, id, this.getDate(dateStart), this.getDate(dateEnd));
}
My Scss code
.table-container {
.activetab {
display: block !important;
}
}
HTML code that has been modified from another source
<tbody>
<tr *ngFor="let data of itemSoldSub2;let i=index" [ngClass]="{activetab: isActive(data.categoryId)}">
<div (click)="getSub(data.categoryId);">
<div *ngIf = "data.categoryName">
<td style="border-bottom: none;">{{data.categoryName}}</td>
</div>
<div *ngIf = "!data.categoryName">
<td style="border-bottom: none;">Uncategorized</td>
</div>
<td style="border-bottom: none;">{{data.sumPrice}}</td>
</div>
<!-- </tr> -->
<table>
<tbody [ngClass]="{activetab: isActive(data.categoryId)}">
<tr *ngFor="let sub of itemSoldSub3">
<td>{{sub.itemName}}</td>
<td>{{sub.sumTotalPrice}}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>