隱藏的專案未正確顯示在我想要的位置-有解無憂

當用戶單擊 32 時，我想在該行之后顯示一個新的隱藏表。

我的問題是隱藏表位于第一個表的底部。

隱藏的專案未正確顯示在我想要的位置

抱歉，我不知道這是否是 Angular 的問題？也許是 HTML 或 CSS？

這是我在Stackblitz 上的代碼

檔案.HTML

<table class="table table-striped" style="width:100%; text-align: center;">
   <thead>
      <tr>
         <th scope="col" style="width: 4%; ">LABEL</th>
         <th scope="col" style="width: 9%; ">LABEL</th>
         <th scope="col" style="width: 9%; ">LABEL</th>
         <th scope="col" style="width: 5%; ">LABEL</th>
         <th scope="col" style="width: 10%; ">LABEL</th>
         <th scope="col" style="width: 14%; background-color: #dee2e657; ">
            LABEL
         </th>
         <th scope="col" style="width: 10%;">LABEL</th>
         <th scope="col" style="width: 5%; ">LABEL</th>
         <th scope="col" style="width: 9%;">LABEL</th>
         <th scope="col" style="width: 9%; ">LABEL</th>
      </tr>
   </thead>
   <tr>
      <td scope="col" style="width: 4%; ">10</td>
      <td scope="col" style="width: 9%; ">30</td>
      <td scope="col" style="width: 9%; ">58</td>
      <td scope="col" style="width: 5%; ">11</td>
      <td scope="col" style="width: 10%; ">17</td>
      <td scope="col" style="width: 12%; background-color: #dee2e657;">
         <button (click)="toggle()" id="bt">{{ 32 }}</button>
      </td>
      <td scope="col" style="width: 10%; ">44</td>
      <td scope="col" style="width: 5%; ">20</td>
      <td scope="col" style="width: 9%; ">10</td>
      <td scope="col" style="width: 9%; ">11</td>
   </tr>
   <tr>
      <td scope="col" style="width: 4%; ">20</td>
      <td scope="col" style="width: 9%; ">40</td>
      <td scope="col" style="width: 9%; ">18</td>
      <td scope="col" style="width: 5%; ">31</td>
      <td scope="col" style="width: 10%; ">27</td>
      <td scope="col" style="width: 12%; background-color: #dee2e657;">47</td>
      <td scope="col" style="width: 10%; ">25</td>
      <td scope="col" style="width: 5%; ">21</td>
      <td scope="col" style="width: 9%; ">90</td>
      <td scope="col" style="width: 9%; ">51</td>
   </tr>
</table>
<ng-container *ngIf="show">
   <table class="table table-striped" style="width:100%; text-align: center;">
      <thead>
         <tr>
            <th scope="col" style="width: 4%; ">NAME</th>
            <th scope="col" style="width: 9%; ">FIRST NAME</th>
         </tr>
      </thead>
   </table>
</ng-container>

檔案.TS

export class AppComponent {
  public show: boolean = false;
  public buttonName: any = 'Show';

  ngOnInit() {}

  toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if (this.show) this.buttonName = 'Hide';
    else this.buttonName = 'Show';
  }
}

uj5u.com熱心網友回復：

這是一種解決方案，但不是最好的。

https://stackblitz.com/edit/angular-ivy-qqm243?file=src/app/app.component.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/314764.html

標籤：html css 有角的打字稿

上一篇：ngb日期選擇器禁用過去的日期角度

下一篇：如何根據每個物件中的欄位值過濾陣列并將該物件下的其余欄位分組