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

Angular 2 - 当表为空时，使用表隐藏面板

1 个答案: