单击Angular2中的链接时隐藏/显示表格行 [英] Hide/show a table row when clicking on a link in Angular2

问题描述

请不要将其标记为重复项-我已经尝试了以下链接:1)隐藏/显示ngFor内部的单个项目2)角度2-展开折叠表格行3)隐藏/显示个人ngFor内角度为2的项目

Please don't mark it as a duplicate- I have tried the below links already: 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>

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

Its working if I click on the same "Expand/Collapse" link 2 times - first it shows and then it hides. But if I click on a link once(it shows) and then click on another link, both of the expansions will show the same data in the inner table( which is the data of the last expansion). What I need is the first expansion should show the data related to that link and second expansion should show the data related to the second one.

请，任何指针都将有所帮助.如果不清楚我是否在描述问题，请告诉我.

Please, any pointers would be helpful. Please let me know if I am not clear in describing the issue.

推荐答案

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

The problem you are facing here is that you are associating a toggle to an element inside a for loop without actually creating different references. This means that all the generated table rows will point to the same reference so when you click one link it will affect multiple.

由于您已经在 ngFor 循环上获取了 index ，因此应将该索引与切换引用相关联.结果将变成这样

Since you are already getting the index on the ngFor loop you should associate that index to the toggle references. The result would become something like this

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

这样，操作的引用将保留在表的每一行上.

This way the reference for the action would be kept on each row of the table.

但是要简化看来是您的目标，您可以拥有

But to simplify what it seems to be your goal you could just have

(click) = "toggle[i] = !toggle[i]"

然后在隐藏了开关的地方我也将替换

And then where you have the hidden checking the toggle I would also replace

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

使用

[hidden]="!toggle[i]"

我相信您只需要模板标志.除非您需要一些更复杂的行为，否则我根本就不需要组件功能

I believe you just need the template flags. Unless you need some more complex behaviour I don’t think you need the component function at all

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

I have also noticed that you have the second ngFor loop without an index. This will cause issues because when you set the indProjects property it will have the same value for all the rows. So you need to pass the index to your expand(total.projectGroup, i) function and in the template when doing the loop you will need to read from

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

这样，您肯定会在每行中拥有唯一的列表

This way you will for sure have unique list per row

这篇关于单击Angular2中的链接时隐藏/显示表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！