I have created a table that displays data, and within this table there are 2 tr elements with the classes default and toggle-row. When I click on a tr element with the class default, it should only toggle the corresponding tr element with the class toggle-row. However, my current code toggles all the toggle-row elements when any default row is clicked. How can I fix this issue? I am using *ngIF to handle the toggling of table rows.
The template file looks like this:
<table class="table table-container table-responsive" id = "team-members">
<thead class="table-heading">
<tr>
</tr>
</thead>
<tbody class="data-item" *ngFor = "let member of teamMember; let i = index" >
<tr id ="{{i}}" (click)="Toggle(i)" class="default">
<td *ngFor = "let hrs of member.Value.hoursLogged">
{{ hrs }}
</td>
</tr>
<ng-container *ngFor = "let subtask of member.Value.subTasks">
<tr class="toggle-row" *ngIf="toggle" >
<td>
{{ subtask.taskType }}
</td>
<td *ngFor="let hrs of subtask.subtaskHoursLogged">
{{ hrs }}
</td>
</tr>
</ng-container>
<tbody>
</table>
This loop creates the following structure:
<table>
<thead></thead>
<tbody>
<tr id="1" class="default"><tr>
<tr class="toggle-row"></tr>
<tr class="toggle-row"></tr>
<tr class="toggle-row"></tr>
</tbody>
<tbody>
<tr id="2" class="default"><tr>
<tr class="toggle-row"></tr>
<tr class="toggle-row"></tr>
<tr class="toggle-row"></tr>
</tbody>
<tbody>
<tr id="3" class="default"><tr>
<tr class="toggle-row"></tr>
<tr class="toggle-row"></tr>
<tr class="toggle-row"></tr>
</tbody>
</table>
I want to toggle the table-row class only when a default class row is clicked within its respective tbody.
The TypeScript file associated with this template is as follows:
import { Component, OnInit } from '@angular/core';
import { DataServiceService } from "../../services/data-service.service";
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {
private teamMember: any[];
public toggle = false;
constructor(private dataserve: DataServiceService) { }
ngOnInit() {
this.dataserve.getTeamMemberData()
.subscribe(
(data: any) => {
var localarray= [];
for (let key in data){
localarray.push({key:key, Value:data[key]});
}
this.teamMember = localarray;
console.log(this.teamMember);
}
);
}
Toggle(value){
this.toggle = !this.toggle;
}
}