在页面加载时隐藏元素 [英] Hiding an element on page load

问题描述

此问题是

This question is a second part of Hide/show a table row when clicking on a link in Angular2

I am displaying all products on the page, but I also have a select dropdown to just show the individual product’s details. Lets say in the first page( All Products page), I expanded the first product. And then I go to the dropdown and select a product, so it displays that product’s details along with the inner table expanded - but with the details of the product expanded in the first page. I need to click on the link to get the correct product details -bcoz we do the hide and show on (click) event. So my question is -Is there a way to always collapse the link when going to a new page?

添加相关代码-html文件

Adding the relevant code - html file

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

And the component.ts file

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

}

推荐答案

考虑到您在组件中引用了 toggle [] ，为什么不破坏销毁后重置所有扩展状态?组件?

Considering you have the reference to toggle[] in your component, why don’t you reset all the expanded states upon destruction of the component?

我相信您可能会遇到

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

或者，如果您愿意，也可以运行 toggle 数组并将每个索引设置为false.

Or if you want you could also run the toggle array and set false to each of the indexes.

这篇关于在页面加载时隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！