ng用于在可折叠菜单卡中显示单个项目

Question

我试图在点击 Details link 时将每张卡片的详细信息显示为可折叠的 menu.I 使用 bootstrap 的数据切换 class 由 id 识别。

我无法使 data-target 中的目标 ID 动态化。我尝试通过提供 data-target="openPanel[item]"/ `data-target="openPanel[i1]"' 来获取动态值，但它不起作用。

请找那个笨蛋link here

Answer 1

为您的详细信息面板使用 *ngIf：

<div class="collapse" id="openPanel" *ngIf="isActive[i1]">
    This is {{item.year}} panel 
</div>

Plunker link 这里：PLUNKER DEMO

Answer 2

<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>&nbsp;&nbsp;&nbsp;
  </div>
<div class="collapse" id="openPanel_{{i1}}">
       This is {{item.year}} panel
      </div>

属性绑定是解决方案。 Bootstrap data-toggle 应该得到唯一的 id，所以在你的情况下给索引 i1 使 id 唯一参考：

Answer 3

将您的模板更改为：

<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>&nbsp;&nbsp;&nbsp;
         </div>
         <div class="collapse" id="openPanel{{i1}}">
            This is {{item.year}} panel
           </div>
</div>

Plunkar Link Here

ng用于在可折叠菜单卡中显示单个项目

ngFor display individual items inside collapsible menu card

javascript

css

collapse

twitter-bootstrap

angular