角+引導 - 崩潰行

Question

我使用bootstrapcollapse功能顯示細節行，當我點擊一個按鈕。它工作正常，除非細節行始終顯示在相同的位置，即低於第一行。我希望它顯示在我選擇按鈕的行的下方。這裏是我的代碼：

<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。任何人都可以給我一個提示嗎？謝謝。

Answer 1

經過了漫長的上午花費瀏覽和嘗試不同的方法，我找到了一個解決方案。像魅力一樣工作，我不必如此改變我的代碼。雖然我放棄了bootstrap collapse課程。
要在時間顯示一個明細行，我必須跟蹤我的ngFor中的物品索引，並僅在索引與當前行項目索引匹配時才顯示詳細信息。
希望這可以幫助別人。

app.component.html

[...some other code...] 
<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" (click)="showSelected(p.id)"></button> 
    </div> 

    <!-- details row --> 
    <div class="row-fluid" id="details" *ngIf="selected && p.id == selectedId"> 
     <!-- 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> 

app.component.ts

export class AppComponent implements OnInit { 

    selected : boolean; 
    selectedId: number; 

    constructor() { 
    this.selected = false; 
    } 

    ngOnInit() {} 

    showSelected(rowId){ 
     this.selected = !this.selected; 
     this.selectedId = rowId; 
    } 
}