Question

我使用Angular创建了一个显示数据的表。数据来自使用Papa Parse库解析的CSV。我的数据几乎可以立即在控制台中使用，但是大约需要10秒钟才能显示在表中。这是表格的代码：

<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">
        <ng-container *ngIf="((i && !searchOn) || searchOn) && record.length > 1">
          <td *ngFor="let index of indexes; let x = index">
            <a *ngIf="x == 3" href="{{record[index]}}" target="_blank">{{record[index]}}</a>
            <ng-container *ngIf="x != 3">{{record[index]}}</ng-container>
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>
</div>

我想在表加载时显示一个加载微调器，但是当数据加载到DOM中时需要侦听。我该怎么办？

Answer 1

您已经拥有*ngIf="searchData?.length"，因此这将在加载数据时起作用。现在，您只需要在数据加载时显示微调框...只需添加另一个if条件，如果条件为not：

<div *ngIf="!searchData?.length">Loading...</div>

元素已加载到DOM中时发生的事件

1 个答案: