クリックすると、各カードの詳細を折りたたみ可能なメニューとしてDetailsリンクに表示しようとしています。私はIDによって識別されるブートストラップのデータトグルクラスを使用しています。ng折りたたみ可能なメニューカード内に個々のアイテムを表示する
data-targetのターゲットIDを動的にできません。 data-target="openPanel[item]"/`data-target =" openPanel [i1] "'を使って動的な値を取得しようとしましたが、動作しません。
あなたの詳細パネル用plunkerリンクhere
：
<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>
再度同じ「詳細」をクリックすると、ハイライトを削除することはできますか？つまり、「詳細」を折りたたむと前の状態になるはずです – forgottofly
@forgottoflyあなたは反転する必要はありませんクラスを開いたときにcssを強調表示するクラスが既に適用されています。あなたは開かれたacordionを選択してCSSを適用しません。 –
申し訳ありませんが、plunkerで更新できます – forgottofly
使用*ngIfを見つけてください：
<div class="collapse" id="openPanel" *ngIf="isActive[i1]"> This is {{item.year}} panel </div>
Plunkerリンク：PLUNKER DEMO
<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>
属性バインディングが解決策です。 Angular 2 data attributes
あなたが詳細を展開したいデータトグルが一意のIDを取得する必要がありますブートストラップので、IDがユニーク refを作るために、あなたの場合のインデックスI1を与えます一度に1つのパネルの？ – Faisal
はい@ Faisal.Likeアコーディオン – forgottofly