0
ボタンをクリックしたときに詳細行を表示するには、bootstrap
collapse
機能を使用しています。詳細行が常に最初の行の下にある同じ位置に表示されない限り、正常に動作します。ボタンを選択した行の下に表示します。ここに私のコード:角度+ブートストラップ - 折りたたみ行
<div *ngIf="pratiche">
<div class="row" id="list" *ngFor="let p of pratiche">
<div class="col-1"></div>
<div class="col-2">
<div>
<p>{{ p.id }}<br>
<span>{{ p.banca }}</span>
</p>
</div>
</div>
<div class="col-2">
<p>{{ p.statoOperativo }}</p>
</div>
<div class="col-2">
<p>{{ p.richiedente }}</p>
</div>
<div class="col-2">
<p>{{ p.dataSopralluogo * 1000 | date:'dd/MM/yyyy' }}</p>
</div>
<div class="col-2">
<p>{{ p.dataUltimaAzione * 1000 | date:'dd/MM/yyyy' }}</p>
</div>
<div class="col-1" id="clock">
<button class="fa fa-clock-o" data-toggle="collapse" data-target="#details"></button>
</div>
<!-- details row -->
<div class="row-fluid collapse" id="details">
<!-- time details header -->
<div class="row">
<div class=col-1></div>
<div class="col"><p>Giorni effettivi</p></div>
<div class="col"><p>1° step</p></div>
<div class="col"><p>2° step</p></div>
<div class="col"><p>3° step</p></div>
<div class="col"><p>4° step</p></div>
<div class="col"><p>Giorni netti</p></div>
<div class="col"><p>SLA 1</p></div>
<div class="col"><p>SLA 2</p></div>
<div class="col">Giorni consegna</div>
<div class=col-1></div>
</div> <!-- end -->
<!-- time details -->
<div class="row">
<div class=col-1></div>
<div class="col"><p>{{p.giorniEffettivi}}</p></div>
<div class="col"><p>{{p.step1}}</p></div>
<div class="col"><p>{{p.step2}}</p></div>
<div class="col"><p>{{p.step3}}</p></div>
<div class="col"><p>{{p.step4}}</p></div>
<div class="col"><p>{{p.giorniNetti}}</p></div>
<div class="col"><p>{{p.sla1}}</p></div>
<div class="col"><p>{{p.sla2}}</p></div>
<div class="col"><p>{{p.giorniConsegna}}</p></div>
<div class=col-1></div>
</div><!-- end -->
</div> <!-- end details row -->
</div>
</div>
私はブートストラップgrid system
を使用しています。誰も私にヒントを与えることができますか?ありがとう。