Ionic5中*ngFor报错：Can't bind to 'ngForOf'问题求助

Hey there, let's work through this frustrating ngFor error you're hitting! First off, it's weird that it works on first run but breaks on refresh—usually that points to a lazy loading or module import quirk, which is super common in Ionic tab apps. Let's go through the most likely fixes step by step:

1. Double-Check Lazy-Loaded Tab Modules #

Ionic 5 tab apps use lazy loading by default, which means each tab has its own module file (like tab1.module.ts, tab2.module.ts). Even though you've imported BrowserModule in app.module.ts, lazy-loaded modules don't inherit imports from the root module.

You mentioned you imported CommonModule in sub modules—but make sure every tab module that uses *ngFor has CommonModule in its imports array, and that the component using ngFor is declared in that module's declarations array. Here's what a correct tab module should look like:

// tab1.module.ts (example for your tab module)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // This is critical!
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { Tab1PageRoutingModule } from './tab1-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page] // Ensure your component is listed here
})
export class Tab1PageModule {}

2. Check Shared Components (If You Have Any) #

If you're using a shared component that uses *ngFor, you need to:

• Import CommonModule in the shared component's module
• Export the shared component from that module
• Import the shared module into any tab module that uses the component

For example, a shared module might look like this:

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MySharedComponent } from './my-shared.component';

@NgModule({
  imports: [CommonModule],
  declarations: [MySharedComponent],
  exports: [MySharedComponent] // Export so other modules can use it
})
export class SharedModule {}

Then import SharedModule into your tab module's imports array.

3. Clear Angular/Ionic Cache #

Sometimes stale cache can cause odd behavior where first run works but refresh breaks. Run these commands to clean things up:

ionic build --clean
ionic serve

4. Quick Template Syntax Check #

Even though it worked on first run, it's worth double-checking your template for typos. Make sure you're using the correct syntax:

<!-- Correct -->
<div *ngFor="let item of yourItemList">
  {{ item.name }}
</div>

<!-- Wrong (missing asterisk or misspelled) -->
<div ngFor="let item of yourItemList">...</div>
<div *ngForOf="let item of yourItemList">...</div>

Most of the time, the issue boils down to forgetting CommonModule in a lazy-loaded tab module. Give that a first check, and if it still doesn't work, try clearing the cache next.

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