2017-08-01 17 views
0


ボタンをクリックしたときに詳細行を表示するには、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を使用しています。誰も私にヒントを与えることができますか?ありがとう。

答えて

0

長い時間をかけてブラウジングし、さまざまなアプローチを試みた結果、解決策が見つかりました。魅力のように動作し、私は自分のコードをあまり変更する必要はありませんでした。私は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; 
    } 
} 
関連する問題