如果表为空，则隐藏表

Question

我有两个表和几个数据。

img01

如果我的表是空的，我想隐藏这些表。

img02

我不知道是否可以在Angular中创建这个?如果你有办法解决我的问题，我真的很想试试。

我的代码如下:

file.html

<div class="row" >
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped">
<tr style="background-color: #f8f9fa;">
<td style="width: 13%;">Opening</td>
<td style="width: 13%;">Highest</td>
<td style="width: 13%;">Lowest</td>
<td style="width: 13%;">Last</td>
<td style="width: 15%;">Trend</td>
<td style="width: 6%;">    Time</td>
<td style="width: 15%;">Day volume</td>
<td style="width: 10%;">Last update</td>
</tr>
<tr *ngIf="statusLine.open != 0">
<td>
{{statusLine.open | number:'1.6-6'  }}
</td>
<td>
{{statusLine.high | number:'1.6-6'  }}
</td>
<td>
{{statusLine.low | number:'1.6-6'  }}
</td>
<td>
<span *ngIf="statusLine.tendancySign < 0" style="color: red;">
{{statusLine.close | number:'1.6-6'  }}
</span>
<span *ngIf="statusLine.tendancySign >= 0" style="color: green;">
{{statusLine.close | number:'1.6-6'  }}
</span>
</td>
<td class="no-wrap">
<span *ngIf="statusLine.tendancySign < 0" style="color: red;">
<span
style="background:url(/assets/images/toto-online-sprites.png)  1px -834px no-repeat;position:relative;top:5px; display: inline-block;">&nbsp;&nbsp;&nbsp;</span> {{statusLine.tendancyPercent
| number:'1.2-2' }}
</span>
<span *ngIf="statusLine.tendancySign >= 0" style="color: green;">
<span *ngIf="statusLine.tendancySign > 0"
style="background:url(/assets/images/toto-online-sprites.png) -296px -834px no-repeat;position: relative;top:5px; display: inline-block;">&nbsp;&nbsp;&nbsp;</span> {{statusLine.tendancyPercent
| number:'1.2-2' }}
</span>
&nbsp;%
</td>
<td>
{{statusLine.heure | getXFirstElements:'5'}}
</td>
<td>
{{statusLine.volume | number:'1.0'  }}
</td>
<td>
{{statusLine.update | getXFirstElements:'5'}}
</td>
</tr>
</table>
</div>
<ng-container *ngIf="statusLinesII.length > 0">
<div class="table-responsive">
<table class="table table-striped">
<tr style="background-color: #f8f9fa;">
<td style="width: 20%;" class="text-right">
<span> Number of buyers   </span>
</td>
<td style="width: 16%;" class="text-right">
<span> Bid size   </span>
</td>
<td style="width: 10%;" class="text-right">
<span> Limit bid  </span>
</td>
<td style="width: 6%;"> </td>
<td style="width: 10%;"> Limit ask </td>
<td style="width: 16%;" class="text-right">
<span> Quantity ask   </span>
</td>
<td style="width: 20%;" class="text-right">
<span>Number of sellers </span>
</td>
</tr>
<tr *ngFor="let line of statusLinesII">
<ng-container *ngIf="canShowLine(line)">
<td style="border: 0px;" class="text-right">
<span>
{{line.acheteurNumber  }}
</span>
</td>
<td style="border: 0px; text-align: right;">
<span>
{{line.acheteurQty  }}
</span>
</td>
<td style="border: 0px; text-align: right;">
<span>
{{line.acheteurCours | number:'1.6-6'  }}
</span>
</td>
<td style="border: 0px;text-align: right;">
<span>
{{line.vendeurCours | number:'1.6-6'  }}
</span>
</td>
<td style="border: 0px;text-align: right; ">
<span>
{{line.vendeurQty }}
</span>
</td>
<td style="border: 0px;" class="text-right">
<span>
{{line.vendeurNumber  }}
</span>
</td>
</ng-container>
</tr>
</table>
</div>
</ng-container>
</div>
</div>
</div>
</div>

我在google上没有找到具体的解决方案。

谢谢你。

Answer 1

可以在第一个表中使用*ngIf条件。你可以检查如下

<div class="table-responsive" *ngIf="statusLine && statusLine.indexOf('open') !== -1">

(or) objectKeys = Object.keys;//在组件中指定一个变量，并按如下方式使用。

Html:
<div class="table-responsive" *ngIf="statusLine && objectKeys(statusLine).length > 0">
Ts:
objectKeys = Object.keys;