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