Ionic tab页使用*ngFor无法展示数组项 视图不更新问题如何解决

核心原因 #

该问题是Ionic Tab场景下的常见问题，分为两种可能：

• 懒加载Tab模块未导入CommonModule：*ngFor是Angular公共模块提供的结构指令，若HomePage所属的Tab对应懒加载模块没有单独导入CommonModule，*ngFor指令不会生效。放在页面头部可以正常运行是因为根模块默认已经导入了CommonModule，不受懒加载模块的配置影响。
• Ionic页面缓存导致变更检测未触发：Ionic默认会对Tab页面做缓存优化，非激活状态的Tab页面变更检测器会被临时禁用，就算组件属性更新，也不会触发视图重渲染。

修复方案 #

方案1：检查导入CommonModule（优先排查） #

在HomePage对应的懒加载模块（通常为home.module.ts）中确认导入CommonModule和IonicModule，示例代码如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  imports: [
    CommonModule, // 必须导入，否则*ngFor等内置指令不生效
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

这是该场景下最高概率的触发原因，优先按此排查。

方案2：手动触发变更检测 #

如果确认模块导入无问题，则是Ionic缓存导致的变更检测未触发，可通过注入变更检测器手动触发视图更新，修改home.page.ts代码如下：

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  users: string[];
  // 注入Angular变更检测器
  constructor(private cdr: ChangeDetectorRef){}

  getUsers() {    
    this.users = ["user 1", "user 2", "user 3"]
    console.log(this.users);
    // 手动触发变更检测，更新视图
    this.cdr.detectChanges();
  }  
}

方案3：关闭Tab页面缓存（可选） #

如果不需要Tab页面的缓存功能，可以在路由配置中添加data: { noCache: true }，或者在ion-router-outlet上设置animated="false"关闭缓存，避免后续出现同类视图不更新问题。

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