隐藏的项目未正确显示在我想要的位置答案

【问题标题】：The hidden item is not showing correctly where I want it隐藏的项目未正确显示在我想要的位置
【发布时间】：2021-10-14 16:43:48
【问题描述】：

当用户点击 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';
  }
}

【问题讨论】：

您可以借助 CSS 解决此问题，也可以使用 TD 标签移动 HTML 部分
stackblitz.com/edit/angular-ivy-qqm243
为什么不使用带有可扩展行的 Angular 材料表。在内容中，您可以制作自定义表格。使用您当前的方法，您将在第一个表之后显示隐藏的表，以便将其渲染。您必须在按钮下方显示它，这与角度无关。
@Naren Murali：谢谢 Naren Murali，这正是我想要的！

标签： html css angular typescript

【解决方案1】：

这是一种解决方案，但不是最好的。

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

【讨论】：

谢谢，但是可以将 Name 和 FirstName 居中？？
@pops1348 更新了我的堆栈闪电战
我已经在Stackblitz 上调整了我的表格。我仍然有同样的问题:-(
@pops1348 是的，我看到了你的新问题，会尝试提出一些建议