这里执行kpiName循环,并执行subRegion的内部循环
结果创建了4个class="col-xs-2"
的div,在其中创建了两个div(过滤器类中的可单击div),其动态ID为id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}"
,其中onclick调用某个函数。
要求是在点击相应的id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}"
时显示并隐藏相应的4个div(a,b,c,d)的id="filteredDataSubRegion{{index}}"
和id="filteredDataProductLine{{index}}"
。
kpi = [a, b, c, d];
subRegion = ['China', 'India', 'Japan', 'Korea', 'SEATH'];
productLine = ['6A', '7T', '9T', 'UV', 'BA'];
loadFilterData(index,type){
console.log(index);
//---------------------angular2 implementation???------------------
if (type === 'subregion') {
// $('#filteredDataSubRegion' + index).show();
// $('#filteredDataProductLine' + index).hide();
} else {
// $('#filteredDataSubRegion' + index).hide();
// $('#ffilteredDataProductLine' + index).show();
}
}
<div class="col-xs-2 " *ngFor="let kpi of kpiName;let index=index;">
<div class="col-xs-12 rmpm bottomSectionKpis">
<div class="col-xs-12 rmpm filter">
<div class="col-xs-6 rmpm" id="filteredTabSubRegion{{index}}" (click)="loadFilterData(index,'subregion')" [ngClass]="{'activex': act}">Sub Region</div>
<div class="col-xs-6 rmpm" id="filteredTabProductLine{{index}}" (click)="loadFilterData(index,'productline')" [ngClass]="{'activex': activ}">Product Line</div>
</div>
<div class="col-xs-12 rmpm filterTable">
<div class="col-xs-12 rmpm " id="filteredDataSubRegion{{index}}" style="display:block">
<div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;">
<div class="col-xs-2 rmpm filteredDataIcon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class=" col-xs-7 rmpm filteredDataName">{{subRegion[k]}}</div>
<div class="col-xs-3 rmpm filteredDataShift text-center">Shift</div>
</div>
</div>
<div class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}" style="display:none">
<div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;">
<div class="col-xs-2 rmpm filteredDataIcon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class=" col-xs-7 rmpm filteredDataName">{{productLine[k]}}</div>
<div class="col-xs-3 rmpm filteredDataShift text-center">Shift</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
好的,正如smnbbrv所建议的那样:
组件文件:
displayDiv: boolean = false;
loadFilterData(index: number, div: string){
this.displayDiv = !this.displayDiv;
}
HTML文件:
<div *ngIf="displayDiv" class="col-xs-12 rmpm " id="filteredDataSubRegion{{index}}">
...
</div>
<div *ngIf="!displayDiv" class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}">
...
/<div>
这对你有帮助吗?
重新。如果我理解你,你有4个div:
A
A1
A11 (click)-> show only A21
A12 (click)-> show only A22
A2
A21
A22
B (...)
C (...)
D (...)
是吗?
如果是这样,您可以通过多种方式管理显示器。 例如,您可以使用2个变量:displayBlock,displaySubBlock。
displayBlock: boolean = false;
displaySubBlock: boolean = false;
loadFilterData(index: number, div: string){
this.displayBlock = index;
this.displaySubBlock = !this.displaySubBlock;
}
<div *ngIf="displayBlock === i && displaySubBlock" class="col-xs-12 rmpm "id="filteredDataSubRegion{{index}}">
...
</div>
<div *ngIf="displayBlock === i && !displaySubBlock" class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}">
...
</div>
代码未经测试,只是为了这个想法。