Angular 2 - 當表格爲空時隱藏帶表格的面板

Question

我有一個* ngFor，用於創建存放表格的面板。這些表格有一個* ngFor，爲數據集中的每個項目創建<td>。

有時表中將有空行。有沒有一種聰明的方式來使用Angular來隱藏桌子上沒有孩子的面板？我大概可以使用jQuery來檢查負載上的兒童，但是我覺得應該使用Angular * ngFor更直觀的答案。

<div class="col-md-12 col-lg-6 cell-box" *ngFor="let siteGroup of sqlData | FilterData:[currentDate, selectedGroup] | UniqueValue:['Site']"> 

       <!-- SD Data --> 
       <div class="panel panel-midblue"> 
        <div class="panel-heading"> 
         <span>{{selectedGroup}} - {{siteGroup}}</span> 
        </div> 
        <div class="panel-body"> 
         <table class="exportTable table table-hover table-condensed"> 
          <thead> 
           <th>Metric Name</th> 
           <th>Daily&emsp;&emsp;&emsp;</th> 
           <th>Week to Date</th> 
           <th>Month to Date</th> 
           <th>Year to Date</th> 
          </thead> 
          <tr *ngFor="let item of sqlData | FilterData:[currentDate, selectedGroup, siteGroup, selectedType] | OrderBy:['MetricName',['Volume','TSF', 'ASA','AHT', 'ACW', 'ABAN', 'FCR']]" [attr.goalvalue]="item.DayMetGoal"> 
           <td>{{item.MetricName}}</td> 
           <td class="cursor-hand" [attr.goalvalue]="item.DayMetGoal" (click)="ModalPopUp($event, item)">{{item.DayMetricValue | FormatMetric:item.MetricName }}</td> 
           <td class="cursor-hand" [attr.goalvalue]="item.WTDMetGoal" (click)="ModalPopUp($event, item)">{{item.WTDMetricValue | FormatMetric:item.MetricName }}</td> 
           <td class="cursor-hand" [attr.goalvalue]="item.MTDMetGoal" (click)="ModalPopUp($event, item)">{{item.MTDMetricValue | FormatMetric:item.MetricName }}</td> 
           <td class="cursor-hand" [attr.goalvalue]="item.YTDMetGoal" (click)="ModalPopUp($event, item)">{{item.YTDMetricValue | FormatMetric:item.MetricName }}</td> 
          </tr> 
         </table> 
        </div> 
        <div class="panel-footer"> 
         <h5 class="text-muted"></h5> 
        </div> 
       </div> 

      </div> 

Answer 1

您可以使用[隱藏]

<h3 [hidden]="!favoriteHero"> 
    Your favorite hero is: {{favoriteHero}} 
</h3> 

見角文檔： https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html#!#ng-show