时间戳

首页 > 解决方案 > 如果表格为空，则隐藏表格

angular - 如果表格为空，则隐藏表格

问题描述

我有 2 个包含多个数据的表。

img01

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

img02

我不知道是否可以在 Angular 中创建它？如果您对我的问题有解决方案，我真的很想尝试一下。

我的代码如下：

文件.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>

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

非常感谢。

标签： angulartypescript

解决方案

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

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

（或）objectKeys = Object.keys；// 在组件中分配一个变量并如下使用它。

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

Ts:
objectKeys = Object.keys;

推荐阅读