在页面加载时隐藏元素

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。