一段时间后隐藏和替换 Div

Question

我在组件 html 组件上以角度显示表格。我注意到提取数据和过滤数据需要一些时间，并且表格不会立即加载。所以我决定添加一个加载微调器图像但是我希望加载微调器在大约 5 秒后消失并且表格出现。我写了一些代码让微调器在 5 秒后消失但是我遇到了加载微调器 div 仍然在页面上并且必须向下滚动才能看到溢出框中的表格的麻烦。有没有办法让加载微调器 div 完全消失，或者甚至可以将表 div 换成微调器 div？

component.html

<!-- Displaying Data from NCEI Data Pull -->
<h1>Preview Data</h1>
<div id="scrollable-area">
    
    <!-- Display Loading Circle -->
    <div class="loading hide">
        <div class="circle"></div>
    </div>

    <table class="table">
    
        

        <!-- Display Headers -->
        <th *ngFor = "let row of headers">
            {{row}}
        </th>
    
        <!-- Display Data -->
        <tr *ngFor = "let row of dataObj">
            <td *ngFor = "let column of row" class="rows">{{ column }}</td>
        </tr>
    </table>
</div>

component.css

h1{
      text-align: center;
      color:rgb(0, 0, 0);
      padding: 15px 32px;
      text-decoration: none;
      margin: 4px 2px;
      
}

table{
    font-family: 'Trebuchet MS', Arial, Arial, Helvetica, sans-serif;
    border-collapse: separate;
    width: 100%;
    border-radius:6px;
}


td{
  padding: 8px;
  align-content: center;
  text-align: center;
  background-color: white;
} 
th{
  padding: 8px;
  align-content: center;
  text-align: center;
  background-color: white;
  color: black;
  position: sticky;
  top: 0;
}

#scrollable-area {
  margin: auto;
  width: 80%;
  height: 400px;
  border: 2px solid #ccc;
  overflow-y: scroll;
  border-radius: 20px;
  border-left:solid black 9px;
  border-top:solid black 9px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
  background-color: rgb(172, 169, 169);
}
#scrollable-area::-webkit-scrollbar {
  width: 9px;               /* width of the entire scrollbar */
  height: 9px;
}
#scrollable-area::-webkit-scrollbar-corner{
  background: black;
  border-bottom-right-radius: 20px;
}
#scrollable-area::-webkit-scrollbar-track {
  background: black;
  border-radius: 50px;
  border: double black 1px;
}

#scrollable-area::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0);
  border-radius: 20px;
  border: 3px solid rgb(255, 255, 255);
  
}

.loading{
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.circle{
  content: "";
  width: 20px;
  height: 20px;
  border: 5px solid #dddddd;
  border-top-color: rgb(88, 118, 86);
  border-radius: 50%;
  animation: loading 1.5s ease infinite;
}

@keyframes loading{
  to {
    transform: rotate(1turn)}
}

.hide {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 5s;
  position: relative;
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}

任何建议将不胜感激。

三个进度截图 [1]：https://i.stack.imgur.com/0iqeN.png [2]：https://i.stack.imgur.com/QPgm1.png [3]：https://i.stack.imgur.com/0u8gB.png

Answer 1

您可以使用*ngIf 指令根据是否收到数据来显示和隐藏加载程序。我想您会在dataObj 中收到您的回复？您可以创建一个标志isLoading 或只使用您的dataObj 来检查数据是否已到达。

    <div *ngIf="!dataObj">
        <div class="circle"></div>
    </div>
    <table class="table" *ngIf="dataObj">   
        <!-- Display Headers -->
        <th *ngFor = "let row of headers">
            {{row}}
        </th> 
        <!-- Display Data -->
        <tr *ngFor = "let row of dataObj">
            <td *ngFor = "let column of row" class="rows">{{ column }}</td>
        </tr>
    </table>

另外，正如我提到的，您可以创建一个标志并使用它来确定您何时想要显示加载器。所以有了一个标志，它看起来像这样。首先让我们在 .ts 组件中创建标志：

//Either initialize it with true or set its value to true when you begin the get call
isLoading: boolean = true;

//Wherever you getting the response just set isLoading to false
this.isLoading = false

你的 HTML 看起来像这样

    <div *ngIf="isLoading">
        <div class="circle"></div>
    </div>
    <table class="table" *ngIf="!isLoading">   
        <!-- Display Headers -->
        <th *ngFor = "let row of headers">
            {{row}}
        </th> 
        <!-- Display Data -->
        <tr *ngFor = "let row of dataObj">
            <td *ngFor = "let column of row" class="rows">{{ column }}</td>
        </tr>
    </table>