![filteredTabProductLine]( "filteredTabProductLine")
本文介绍了如何在angular2中显示/隐藏div的动态ID的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里执行了一个 kpiName 循环，并且还执行了 subRegion 的内部循环.
结果，创建了 class="col-xs-2" 的 4 个 div，并在其中创建了两个 div(过滤器类中的可点击 div)，其动态 ID 为 id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" 其 onclick 调用了一些函数.
要求是当对应的id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}"被点击时显示和隐藏id="filteredDataSubRegion{{index}}" 和 id="filteredDataProductLine{{index}}" 对应的 4 个 div(a,b,c,d).
app.component.ts
kpi = [a, b, c, d];subRegion = ['中国', '印度', '日本', '韩国', 'SEATH'];productLine = ['6A', '7T', '9T', 'UV', 'BA'];加载过滤器数据(索引，类型){控制台日志(索引)；//----------------- angular2 实现???------------------如果(类型 === '子区域'){//$('#filteredDataSubRegion' + index).show();//$('#filteredDataProductLine' + index).hide();} 别的 {//$('#filteredDataSubRegion' + index).hide();//$('#ffilteredDataProductLine' + index).show();}}
app.component.html
<div class="col-xs-12 rmpm bottomSectionKpis"><div class="col-xs-12 rmpm 过滤器"><div class="col-xs-6 rmpm" id="filteredTabSubRegion{{index}}" (click)="loadFilterData(index,'subregion')" [ngClass]="{'activex': act}">子区域</div><div class="col-xs-6 rmpm" id="filteredTabProductLine{{index}}" (click)="loadFilterData(index,'productline')" [ngClass]="{'activex': activ}">产品线</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 rmpmfilteredDataRow" *ngFor="let subDta of subRegion;let k = index;"><div class="col-xs-2 rmpmfilteredDataIcon"><i class="fa fa-circle" aria-hidden="true"></i>
<div class="col-xs-7 rmpmfilteredDataName">{{subRegion[k]}}</div><div class="col-xs-3 rmpmfilteredDataShift text-center">Shift</div>
<div class="col-xs-12 rmpm" id="filteredDataProductLine{{index}}" style="display:none"><div class="col-xs-12 rmpmfilteredDataRow" *ngFor="let subDta of subRegion;let k = index;"><div class="col-xs-2 rmpmfilteredDataIcon"><i class="fa fa-circle" aria-hidden="true"></i>
<div class="col-xs-7 rmpmfilteredDataName">{{productLine[k]}}</div><div class="col-xs-3 rmpmfilteredDataShift text-center">Shift</div>
解决方案
好的，正如 smnbbrv 建议的那样:
组件文件:
displayDiv: boolean = false;loadFilterData(索引:数字，div:字符串){this.displayDiv = !this.displayDiv;}
HTML 文件:
...
<div *ngIf="!displayDiv" class="col-xs-12 rmpm" id="filteredDataProductLine{{index}}">.../
这对您有帮助吗?
再.如果我理解你的话，你有 4 个 div:
AA1A11(点击)->仅显示 A21A12 (点击)->仅显示 A22A2A21A22乙(……)C (...)丁(……)
是吗?
如果是这样，您可以通过多种方式来管理您的显示.例如，您可以使用 2 个变量:displayBlock、displaySubBlock.
displayBlock: boolean = false;displaySubBlock: boolean = false;loadFilterData(索引:数字，div:字符串){this.displayBlock = 索引；this.displaySubBlock = !this.displaySubBlock;}<div *ngIf="displayBlock === i && displaySubBlock" class="col-xs-12 rmpm "id="filteredDataSubRegion{{index}}">...
<div *ngIf="displayBlock === i && !displaySubBlock" class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}">...
代码未经测试，仅供参考.
Here a loop of kpiName is executed and inside loops of subRegion also executed.
As a result 4 divs of class="col-xs-2" are created and inside it two div(clickable divs inside filter class) are created having dynamic Id as id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" which onclick calls some function.
The requirement is when corresponding id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" is clicked show and hide id="filteredDataSubRegion{{index}}" and id="filteredDataProductLine{{index}}" of corresponding 4 divs(a,b,c,d).
app.component.ts
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();
}
}
app.component.html
<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>
解决方案
Ok, so as smnbbrv proposes, something like :
Component file :
displayDiv: boolean = false;
loadFilterData(index: number, div: string){
this.displayDiv = !this.displayDiv;
}
HTML file :
<div *ngIf="displayDiv" class="col-xs-12 rmpm " id="filteredDataSubRegion{{index}}">
...
</div>
<div *ngIf="!displayDiv" class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}">
...
/<div>
Does this help you ?
Re. If I understand you well, you have 4 divs :
A
A1
A11 (click)-> show only A21
A12 (click)-> show only A22
A2
A21
A22
B (...)
C (...)
D (...)
Is that right ?
If so, you have several possibilities to manage your displays.By example, you can use 2 variables : 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>
Code not tested, just for the idea.
这篇关于如何在angular2中显示/隐藏div的动态ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
07-22 13:58