javascript - 使用 *ngIf 仅在数据加载后处理显示元素

Question

在我的数据到达我的 Angular 2 应用程序之前，我有一些当前正在加载的分页 ui。这会产生一种不需要的视觉效果，其中分页 ui 组件从页面顶部开始，然后在数据填充后移动到底部。我想通过用 *ngIf 语句包装分页 div 来处理这个问题，因此分页组件不会在数据存在之前加载。

数据被存储在一个“记录”变量中，并被迭代并通过 View 中的分页管道传递，如下所示:

<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 15, currentPage: page, totalItems: customerCount }">

带有分页 ui 的 div 如下所示:

        <div *ngIf="" class="pagination">
            <pagination-controls class="paginator" (pageChange)="page = $event" id="customers"
                    maxSize="15"
                    directionLinks="true"
                    autoHide="true">
            </pagination-controls>
        </div>

您可以在上面看到我想放置 *ngIf 的位置。我的问题是，我可以将什么传递给 *ngIf 进行评估？我尝试使用 *ngIf="records"，但没有用。

Answer 1

使用 !!records && records.length>0。请注意，如果您的 records 变量为 null，!!records 将防止出现 null 错误...如果您确定该变量始终初始化为数组开头，则可以省略 !!记录