Угловая 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

Вы можете использовать [Hidden]

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

См угловую документацию: https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html#!#ng-show