0
我有一個* ngFor,用於創建存放表格的面板。這些表格有一個* ngFor,爲數據集中的每個項目創建<td>
。Angular 2 - 當表格爲空時隱藏帶表格的面板
有時表中將有空行。有沒有一種聰明的方式來使用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   </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>
我很欣賞你指出了使用基於所提供的代碼,如何角2.隱藏方法我會設置一個我可以用來檢查的變量嗎?我基本上需要說,如果'item'沒有值然後隱藏父面板。 –
@Tekk_Know是sqlData對象的數組?如果是這樣你可以[隱藏] =「sqlData.length == 0」 – 12seconds
sqlData確實是一個對象數組。你知道如果在應用過濾管後sqlData.length會做長度嗎? –