Question

我有一个从数据生成的表格，当我点击 tr并使用类默认值时，有2个 tr ，类默认，并且切换行 strong>它应该只切换相应的 tr with class 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>

基本上这个循环会创建结构

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

并且我想在仅在tbody

中单击默认类时切换表行类此模板的

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

Answer 1

您需要在 member.Value.subTasks 变量中移动切换变量，以使每行都能正常工作。

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

您需要更改切换（i）功能以更新 member.Value.subTasks 变量。

希望它有所帮助！

在循环中使用ngif并在使用角度为2

1 个答案: