Question

使用Angular，我建立了一个表，该表与用于搜索的输入进行交互。按Enter触发搜索后，结果几乎可以在控制台中立即获得。但是，更新视图中的表可能需要几秒钟。在此期间，我想向用户显示内容正在加载，但是在HTML完成更新后需要隐藏内容。

这是表格的HTML：

<div class="table-responsive" *ngIf="searchData?.length" style="padding-bottom: 10px;">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th *ngFor="let header of headers">{{header}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let record of searchData">
        <td>{{record.AccountNo}}</td>
        <td>{{record.CustomerTaxID_KB}}</td>
        <td>{{record.custName}}</td>
        <td><a href="{{record.FILE_NAME_KB}}">{{record.FILE_NAME_KB}}</a></td>
        <td>{{record.category}}</td>
        <td>{{record.IncidentComments}}</td>
      </tr>
    </tbody>
  </table>
</div>

更新完成后，如何监听表上的更改？

Answer 1

您可以创建一个用于加载的类，并动态添加或删除类。这是我希望对您有帮助的示例

<div class="table-responsive" *ngIf="searchData?.length" style="padding-bottom: 10px;">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th *ngFor="let header of headers">{{header}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let record of searchData; let i = index" [ngClass]="{ searchData.length === i ? '' : 'loadingClass'}">
         <!-- Hear you can see that we add class loadingClass when length is not equal to array length   -->
        <td>{{record.AccountNo}}</td>
        <td>{{record.CustomerTaxID_KB}}</td>
        <td>{{record.custName}}</td>
        <td><a href="{{record.FILE_NAME_KB}}">{{record.FILE_NAME_KB}}</a></td>
        <td>{{record.category}}</td>
        <td>{{record.IncidentComments}}</td>
      </tr>
    </tbody>
    </table>
   </div>

让我知道它是否正常运行

元素更改时的事件

1 个答案: