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

Question

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

数据存储在“records”变量中，并且正在迭代并通过视图中的分页管道，如下所示：

<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将阻止空错误...如果您确定该变量始终初始化为数组，则可以省略!!记录