时间戳

首页 > 解决方案 > 在 Angular 应用程序的 HTML 视图/模板中，如何等待 ngFor 部分的呈现？

angular - 在 Angular 应用程序的 HTML 视图/模板中，如何等待 ngFor 部分的呈现？

问题描述

假设这种情况：

您刚刚从数据库源接收到矩阵/表格样式数据 - 在变量中： dataSource

现在，您想在表格中呈现数据 - 例如 mat-table。问题是您的数据字段在使用经典的 Anular: *ngFor 渲染时需要一些操作，并且渲染表格需要一些时间。

设计 HTML 模板/视图以显示文本的好方法是什么：

建设报告...

而 *ngFor 正在渲染。

当表格准备好时（*ngFor 已经渲染了最后一行），我们隐藏Building report ...文本并改为显示渲染的表格。

此模板代码只是在呈现页面时显示一个空白页面。我希望用户看到 Building report ...的文本。

  <ng-container *ngIf="dataSource">

    <div class= "table-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSource" matSort>

    <ng-container [matColumnDef]="column" 
      *ngFor="let column of colPropNames">

      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>

    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayCols; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayCols;"></tr>

      </table>

      <div class="box-paginator">
    <mat-paginator class="paginator"
        color="primary"
        [pageSizeOptions]="pageSizeOptions" 
        showFirstLastButtons>
    </mat-paginator>
      </div>
    </div>

  </ng-container>

</div>

标签： angularangular8angular-material2

解决方案

Angular 有一个if else 特点：

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

因此您可以编辑代码以在以下位置显示所需的文本else block：

首先将此添加到您的*ngIf：

<ng-container *ngIf="dataSource; else elseBlock">

并像这样显示您的文本：

 <ng-template #elseBlock>Building report ...</ng-template>

推荐阅读