I am currently in the process of generating a table using data obtained from a JSON. Due to the potential for a large amount of data, I have implemented a loop to create all the rows within the table. My goal is to enable users to click on any specific row and have that particular row expand to display a second row containing additional information listed under list.extraInfo. Here's what the code looks like:
<tbody *ngFor= " let list of lists, let i = index ">
<tr data-toggle="collapse" data-target="#{{i}}" class="clickable">
<td > something </td>
<td >{{i+1}}</td>
<td >{{list.name}}</td>
</tr>
<tr >
<td colspan="3">
<div id="{{i}}" class="collapse">
{{list.extraInfo}}
</div>
</td>
</tr>
</tbody>
Although I'm fully aware that using data-target="#{{i}}" and id="{{i}}" isn't effective, I haven't been able to determine the correct way to assign a unique identifier to each individual row in order to ensure that the collapsing feature functions properly when clicking on a row.
Currently, the extraInfo row opens for the first row regardless of which row I attempt to click on.