我尝试通过点击Details
链接显示每张卡片的详细信息作为可折叠菜单。我使用了由id'标识的bootstrap数据切换类。第
我无法在data-target
动态中制作目标ID。
我试过给data-target="openPanel[item]"
/`data-target =" openPanel [i1]"'获得动态值,但它不起作用。
请找到plunker链接here
答案 0 :(得分:2)
使用*ngIf
作为详细信息面板:
<div class="collapse" id="openPanel" *ngIf="isActive[i1]"> This is {{item.year}} panel </div>
此处有Plunker链接:PLUNKER DEMO
答案 1 :(得分:1)
<div data-toggle="collapse" [attr.data-target]="'#openPanel_'+i1" class="row display-inline-mode">
<h4 [ngClass]="{'flipped': isActive[i1] }" (click)="isActive=[];isActive[i1] = !isActive[i1];">Details
</h4>
</div>
<div class="collapse" id="openPanel_{{i1}}">
This is {{item.year}} panel
</div>
属性绑定是解决方案。 Bootstrap数据切换应该获得唯一ID,因此在您的情况下给出索引i1以使ID唯一 参考:Angular 2 data attributes
答案 2 :(得分:1)
将模板更改为:
<div class="border-box" id="panels">
<div class="quarter-panel panel" *ngFor="let item of quarterDataList;let i1 = index">
<h2>{{item.year}}</h2>
<div class="item-hover" *ngFor="let count of item.quarterData;let i = index" (click)="setClickedRow((i+'_'+item.year))" [class.active]="((i+'_'+item.year)) == selectedRow">
<br>
{{count.view}}-{{count.count}}
</div>
<div data-parent="#panels" data-toggle="collapse" [attr.data-target]="'#openPanel'+ i1" class="row display-inline-mode">
<h4 [ngClass]="{'flipped': isActive[i1] }" (click)="isActive=[];isActive[i1] = !isActive[i1];">Details
</h4>
</div>
<div class="collapse" id="openPanel{{i1}}">
This is {{item.year}} panel
</div>
</div>