Question

这个问题是Hide/show a table row when clicking on a link in Angular2的第二部分

我正在页面上显示所有产品，但我也有一个选择下拉列表，只显示单个产品的详细信息。让我们在第一页（所有产品页面）中说，我扩展了第一个产品。然后我转到下拉列表并选择一个产品，因此它会显示该产品的详细信息以及扩展的内部表 - 但是在第一页中展开了产品的详细信息。我需要点击链接以获取正确的产品详细信息-bcoz我们隐藏并显示（点击）事件。所以我的问题是 - 是否有办法在转到新页面时始终折叠链接？

添加相关代码 - 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[i]=!toggle[i]; expand(total.projectGroup, i)"> Expand/Collapse</a></td>
            </tr>
            <tr *ngIf="toggle[i]">                       
                <div class="table-responsive">
                    <table class="table" width="100%">
                        <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[i]" 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>

还有component.ts文件

  expand(value, index) {
console.log("Product to be expanded="+value);    
return this.service.expandProduct(value)
.subscribe(response =>
  this.indProjects[index] = response.json().data
)

}

Answer 1

考虑到组件中有toggle[]的引用，为什么不在销毁组件时重置所有扩展状态？

我相信你可以拥有像

这样的东西

ngOnDestroy(): void {
    this.toggle = [];
}

或者，如果您需要，还可以运行toggle数组并为每个索引设置false。

在页面加载时隐藏元素

1 个答案: