Angular 4分页初始加载不显示，切换标签后恢复的问题排查

我之前在做Angular项目时也碰到过类似的视图渲染延迟问题，结合你描述的“构建后初始加载看不到分页，切标签页返回就正常”的现象，还有你给出的代码片段，核心原因大概率是Angular的变更检测没有及时触发，导致初始渲染时分页组件的显示条件不满足，下面给你几个具体的排查和解决方向：

1. 优先检查*ngIf的条件变量初始化 #

你的分页组件用了*ngIf="!display_nodata && config.paging"控制显示，这两个变量如果是异步加载（比如从后端API获取配置），初始状态可能是undefined或者不符合显示条件，导致组件根本没被渲染到DOM里。而切换标签页时，Angular会自动触发全局变更检测，此时变量已经拿到正确值，所以分页组件就显示出来了。

解决办法： #

• 给变量设置合理的默认值，比如在组件类里初始化：

  display_nodata = false; // 默认没有空数据状态
  config = { paging: true }; // 默认开启分页
  

• 或者用安全导航操作符避免undefined导致的条件判断错误：

  <pagination *ngIf="!display_nodata && config?.paging" class="pagination-sm" [(ngModel)]="page" [totalItems]="length" [itemsPerPage]="itemsPerPage"></pagination>
  

2. 手动触发变更检测 #

如果你的分页数据（比如totalItems对应的length）是通过非Angular原生的异步方式获取的（比如原生XHR、第三方SDK的回调），Angular的变更检测机制可能无法感知到数据变化，导致视图没有更新。

解决办法： #

注入ChangeDetectorRef，在数据加载完成后手动触发变更检测：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  page = 1;
  length = 0;
  itemsPerPage = 10;
  display_nodata = false;
  config = { paging: false };

  constructor(
    private yourDataService: YourDataService,
    private cdr: ChangeDetectorRef // 注入变更检测服务
  ) {}

  ngOnInit() {
    this.loadPageData();
  }

  loadPageData() {
    this.yourDataService.getList().subscribe(res => {
      this.length = res.totalCount;
      this.config.paging = true; // 拿到数据后开启分页
      this.cdr.detectChanges(); // 手动触发变更检测，更新视图
    });
  }
}

3. 检查ngModel绑定的page变量 #

[(ngModel)]="page"如果没有初始值，可能导致分页组件内部的状态初始化异常，进而影响渲染。

解决办法： #

在组件类里给page设置默认值：

page = 1; // 默认显示第一页

4. 临时排查：用[hidden]替代*ngIf #

如果上面的方法都没效果，可以临时把*ngIf换成[hidden]测试：

<pagination [hidden]="display_nodata || !config?.paging" class="pagination-sm" [(ngModel)]="page" [totalItems]="length" [itemsPerPage]="itemsPerPage"></pagination>

如果换成[hidden]后初始就能显示，说明问题确实出在*ngIf的条件初始不满足，重点去排查display_nodata和config.paging的初始化流程即可。

内容的提问来源于stack exchange，提问作者himanshu