I have 2 tables with several datas.
If my tables are empty, I would like to hide these tables.
I don't know if it's possible to create this in Angular? If you have a solution to my problem, I would really like to try it.
My code is below:
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;"> </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;"> </span> {{statusLine.tendancyPercent
| number:'1.2-2' }}
</span>
%
</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>
I did not find a concrete solution on google.
Thank you so much.
CodePudding user response：
You can use the *ngIf condition in the first table. You can either check as below
<div class="table-responsive" *ngIf="statusLine && statusLine.indexOf('open') !== -1">
(or) objectKeys = Object.keys; // assign a variable in the component and use it as below.
Html:
<div class="table-responsive" *ngIf="statusLine && objectKeys(statusLine).length > 0">
Ts:
objectKeys = Object.keys;