Question

当我点击按钮时，我正在使用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>

我正在使用bootstrap grid system。任何人都可以给我一个暗示吗？感谢。

Answer 1

经过漫长的早晨浏览并尝试不同的方法后，我找到了解决方案。像魅力一样工作，我没有必要改变我的代码。我虽然放弃了ngFor课要显示一个详细信息行，我必须在[...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>  <div class="row-fluid" id="details" *ngIf="selected && p.id == selectedId">  <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>   <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> </div>  </div> </div>中跟踪项目索引，并仅在索引与当前行项索引匹配时显示详细信息。
希望这有助于某人。

<强> app.component.html

export class AppComponent implements OnInit {

  selected : boolean;
  selectedId: number;

  constructor() {
    this.selected = false;
   }

  ngOnInit() {}

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

<强> app.component.ts

{{1}}

Answer 2

这将有助于在单击显示详细信息时扩展行（恰好在同一行下），并在再次单击时将其隐藏。

HTML

      <div class="row" *ngFor="let item of items">
         <div class="col">{{item.name}}</div>
         <div class="col">{{item.address}}</div>
         <div class="col" (click)="showDetails(item)">{{showDetails ? 'Hide Details' : 'Show Details'}}</div>
         <div class="row" *ngIf="showDetails && item.id === selectedItemId">
         <div>details</div>
         </div>
      </div>

ts中的代码

     selectedItemId;
     showDetails = false;

     showDetails(item) {
     this.selectedItemId = item.id;
     this.showDetails = !this.showDetails;
    }

Angular + bootstrap - 折叠行

2 个答案: