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>呈现<!DOCTYPE html> <html> <head> </head> <body> <H1>This is Scott!</H1> <div> <img src='http://mgecombanners.com/wp-content/uploads/2017/12/5KAWFvr_JanTV18_Red_728x90.jpg' border='0' /> </div> </body> </html>。

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

1 个答案: