Angular点击按钮展示隐藏表格位置不符合预期问题求助

问题原因 #

你将需要受控显示的子表格放在了主表格的闭合标签</table>外部，浏览器渲染时自然会将其渲染在整个主表格的末尾，无法跟在指定行的后方，这是HTML结构位置导致的问题，和Angular框架逻辑无关。

解决方法 #

仅调整HTML结构即可，原有TS的toggle交互逻辑无需修改：

• 找到按钮所在的行（即单元格值为10、30、58、32按钮的那一行<tr>），在这一行的后方新增一行<tr>
• 新增行内只放1个<td>，设置colspan="10"（和主表格的总列数一致，占满整行宽度）
• 将原来写在主表格外的ng-container及内部的子表格，整体挪到这个新增的<td>内部

修改后的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 colspan="10">
         <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>
      </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>

修改后点击32按钮，子表格就会直接显示在当前行的正下方，不会跑到整个表格的末尾。

内容的提问来源于stack exchange，提问作者user16665949