Javascript 在循环中使用ngif，并在angular 2中单击具有另一个类的表行时使用特定类切换表行

我有一个从数据生成的表，当我单击tr with class default时，有两个tr和class default以及toggle row当我单击表中的任何一个时，它应该只切换相应的tr with class toggle row但是我的代码会切换所有toggle row类具有类默认值的行。如果要修复此问题，请执行以下操作。我正在使用*ngIF切换表格行

模板文件如下所示

<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>

---

您需要在member.Value.subtask变量中移动toggle变量，使每一行都能正常工作

由于toggle是全局变量，因此它只需更新所有行的视图

 <ng-container *ngFor = "let subtask of member.Value.subTasks">
            <tr class="toggle-row" *ngIf="subtask.toggle" > 
                    <td>
                        {{ subtask.taskType }}
                    </td>
                    <td *ngFor="let hrs of subtask.subtaskHoursLogged">
                        {{ hrs }}
                    </td>
            </tr>
        </ng-container>

{{subtask.taskType}
{{hrs}}

您需要更改Toggle（i）函数来更新member.Value.subTasks变量

希望有帮助

基本上，当单击id为1的tr时，我只想在该tbody中使用toggle row类切换tr，但正如您所提到的，我已将toggle属性分配给每个tr with toggle row类，它只会删除带有类toggle row的所有行，我已经编辑了这个问题并添加了这个模板的typescript文件，你能看一下吗

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;
  }
}

 <ng-container *ngFor = "let subtask of member.Value.subTasks">
            <tr class="toggle-row" *ngIf="subtask.toggle" > 
                    <td>
                        {{ subtask.taskType }}
                    </td>
                    <td *ngFor="let hrs of subtask.subtaskHoursLogged">
                        {{ hrs }}
                    </td>
            </tr>
        </ng-container>