i have an array of objects inside an array that show the informations on a table with a ngFor. I put these informations inside a collapse to only show the table when i click and open that especific collapse. My problem is when i click on the others buttons of collapse, it just opens the first one again and again. How can i fix that?
html:
<ng-container *ngFor="let card of infoArr ; let i = index">
<button data-toggle="collapse" data-target="#demo">
<h3 class="box-title"> open </h3>
</button>
<div id="demo" class="collapse">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered full-data-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Year</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of card">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.year}}</td>
<td>{{item.subject}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</ng-container>
typescript:
export class AppComponent {
name = 'Angular';
infosArr = [
[
{ name: "ana", age: 18, year: 2005, subject: 'math' },
{ name: "sofia", age: 15, year: 2008, subject: 'english' },
{ name: "carlos", age: 17, year: 2006, subject: 'history' },
{ name: "abgail", age: 12, year: 2011, subject: 'art' }
],
[
{ name: "susan", age: 18, year: 2005, subject: 'math' },
{ name: "lucas", age: 15, year: 2008, subject: 'english' },
{ name: "jack", age: 17, year: 2006, subject: 'history' },
{ name: "joseph", age: 12, year: 2011, subject: 'art' }
],
[
{ name: "mirla", age: 18, year: 2005, subject: 'math' },
{ name: "harry", age: 15, year: 2008, subject: 'english' },
{ name: "paula", age: 17, year: 2006, subject: 'history' },
{ name: "sandy", age: 12, year: 2011, subject: 'art' }
]
]
}
the informations are showing and it’s everything ok with the table, but i can’t iterate in a proper way to make each collapse open