[英]ngFor display individual items inside collapsible menu card
我试图在单击Details
链接时将其显示为可折叠菜单,以显示每张卡的Details
我使用的是由ID标识的引导程序数据切换类。
我无法使data-target
目标ID动态化。 我尝试通过给data-target="openPanel[item]"
/`data-target =“ openPanel [i1]”'获得动态值,但它不起作用。
请在此处找到插件链接
将*ngIf
用于您的详细信息面板:
<div class="collapse" id="openPanel" *ngIf="isActive[i1]"> This is {{item.year}} panel </div>
柱塞链接在这里: 柱塞演示
<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唯一ref: Angular 2数据属性
将您的模板更改为此:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.