使用 Angular 2 的 *ngFor 创建表时如何隐藏列

Question

我有一个表格，它接收我的对象并向用户显示信息，如下所示：

<table class="table table-striped" style="table-layout:fixed">
        <tbody>
          <tr>
            <th style="background-color:#009bbb;color:white;width:10%">app Id</th>
            <th style="background-color:#009bbb;color:white">Int Id</th>
            <th style="background-color:#009bbb;color:white">Name</th>               
          </tr>

          <tr *ngFor="let provider of listOfProviders; let i = index" (click)="setSelectedProvider(provider)" data-toggle="collapse" [attr.href]="'#collapse' + i" class="panel-heading">
           <td>{{provider.appId}}</td>
           <td>{{provider.intId}}</td>
           <td>{{provider.name}}</td>
           <div [attr.id]="'collapse' + i" class="panel-collapse collapse" aria-expanded="true" style="margin-left: -550%;margin-top:30%">
            <div class="panel-body">
               <table id='resourceTable' class="table table-striped" style="width:70%">
                <tbody>
                 <tr>
                    <th style="background-color:#009bbb;color:white">Uri</th>
                    <th style="background-color:#009bbb;color:white;width:30%">Status</th>
                 </tr>
                 <tr *ngFor="let item of provider.resources">
                    <td>{{item.uri}}</td>
                    <td>{{item.status}}</td>
                 </tr>
                </tbody>
                </table>
              </div>
            </div>
          </tr>
        </tbody>
       </table>

因此，表格的工作方式是用户将看到表格中的三列，在表格的前面，我要求他们点击他们想要查看的行。在我的对象中，每个条目有一个 appId、一个 intId 和一个名称，但它们最多可以有 30 个“资源”，所以我想将它们显示在一个单独的表中。发生的情况是，当他们单击想要查看的行时，将出现信息下方的第二个表格，并且有关拥有数据的一切都很好。但是，当最初只有三列时，当用户单击该行时，第四列将出现一个“空”标题。有没有办法阻止 *ngFor 显示空标题？

Answer 1

看起来问题只是您的*ngFor 的位置。如果将其移至 <tbody> 标记，它只会为具有数据的行呈现 <th>：https://stackblitz.com/edit/angular-d7avxt。