I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as well and shows the latest calculated data in all rows. I want each row to collapse when another row is expanded.
<table>
<tr *ngFor="let data of datas | search:'Name':query;let i = index">
<td> <button id="button" type="button" class="btn btn-info" data-toggle="collapse" attr.data-target="#demo{{i}}" (click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
<tr id="demo{{i}}" class="collapse" id="insidetr">
Price:{{value | number : '1.2-5'}}
</tr>
</td>
<td>{{data.LastValue | number : '1.2-8'}}</td>
<td>{{data.High | number : '1.2-8'}} </td>
</tr>
</table>
Here is part of my component:
calculateValue(market,value){
var data1 = "data1";
var data2="data2";
if (market.includes(data1)) {
this.value=this.calculateValue(value);
}
}
If you have any suggestions on how to solve this issue, please let me know. Thank you!