单击Angular2中的链接时隐藏/显示表格行

Question

请不要将其标记为重复 - 我已经尝试过以下链接： 1)Hide/show individual items inside ngFor 2)Angular 2 - expand collapse table row 3)Hide/show individual items inside ngFor in angular 2

问题：
单击上一行中的链接时，我试图隐藏/显示表格行，如下所示：component.html

<div class="table-responsive" *ngFor="let total of totals; let i=index">
<table class="table">
    <ng-container *ngIf="total">   
            <h4 class="productName">Product: {{total.projectGroup}}</h4>
            <tr>
                <th>Total LOC</th>
                <th>Total Test Coverage</th>
                <th>Total Coverage on New Code</th>
                <th>Total Technical Debt</th>
                <th>Total Issues</th>
            </tr>        
            <tr>
                <td>{{total.totalLOC}}</td>
                <td>{{total.totalCoverage}}</td>
                <td>{{total.totalNewCoverage}}</td>
                <td>{{total.totalTechDebtDays}}</td>
                <td><span *ngIf="total.totalCriticalIssues >= 0">Critical: </span>{{total.totalCriticalIssues}} <br/> <span *ngIf="total.totalNonCriticalIssues >= 0">Non-critical: </span>{{total.totalNonCriticalIssues}}</td>
            </tr>
            <tr>
                <td><a id="{{i}}" class ="a_link"  (click)="toggle[total.projectGroup]=!toggle[total.projectGroup]; expand(total.projectGroup)"> Expand/Collapse</a></td>
            </tr>
            <tr [hidden]="!toggle[total.projectGroup]">                       
                <div class="table-responsive">
                    <table class="table">
                        <tr class="table-header">
                            <th>Project Key</th>
                            <th>Quality Gate</th>
                            <th>LOC</th>
                            <th>Test Coverage</th>
                            <th>Coverage on New Code</th>
                            <th>Technical Debt</th>
                            <th>Issues</th>
                        </tr>  
                        <tr *ngFor="let pjt of indProjects" class="table-condensed">
                            <td>{{pjt.projectKey}}</td>
                            <td>{{pjt.qualityGate}}</td>
                            <td>{{pjt.loc}}</td>
                            <td>{{pjt.coverage}}</td>
                            <td>{{pjt.newCoverage}}</td>
                            <td>{{pjt.techDebtDays}}</td>
                            <td><span *ngIf="pjt.criticalIssues >= 0">Critical: </span>{{pjt.criticalIssues}} <br/> <span *ngIf="pjt.nonCriticalIssues >= 0">Non-critical: </span>{{pjt.nonCriticalIssues}}</td>
                        </tr>
                    </table>
                </div>
            </tr>                
    </ng-container>
</table>

如果我点击相同的“展开/折叠”链接 2 次，它会起作用 - 首先它会显示，然后它会隐藏。但是如果我单击一个链接一次（它显示）然后单击另一个链接，两个扩展将在内表中显示相同的数据（这是最后一个扩展的数据）。我需要的是第一个扩展应该显示与该链接相关的数据，第二个扩展应该显示与第二个相关的数据。

请，任何指针都会有所帮助。如果我在描述问题时不清楚，请告诉我。

Answer 1

您在这里面临的问题是，您将切换与 for 循环内的元素相关联，而没有实际创建不同的引用。这意味着所有生成的表行都将指向同一个引用，因此当您单击一个链接时，它将影响多个链接。

由于您已经在ngFor 循环中获得了index，您应该将该索引与切换引用相关联。结果会变成这样

toggle_1[total.projectGroup]
toggle_2[total.projectGroup]

这样，操作的引用将保留在表格的每一行中。

但是为了简化你的目标，你可以有

(click) = “toggle[i] = !toggle[i]”

然后你有隐藏的检查切换我也会替换

[hidden]="!toggle[total.projectGroup]"

与

[hidden]="!toggle[i]”

我相信您只需要模板标志。除非你需要一些更复杂的行为，否则我认为你根本不需要组件函数

我还注意到您有第二个 ngFor 循环，没有索引。这将导致问题，因为当您设置 indProjects 属性时，它将对所有行具有相同的值。因此，您需要将索引传递给您的 expand(total.projectGroup, i) 函数，并在执行循环时在模板中读取

<tr *ngFor="let pjt of indProjects[i]" class="table-condensed">

这样你肯定会有每行唯一的列表