Ionic/Angular自定义组件中*ngFor指令报错NG0303解决求助

这个报错的核心原因是你的自定义组件没有被纳入任何包含CommonModule的Angular模块作用域，*ngFor指令由CommonModule提供，不在对应作用域内就无法被识别，可根据组件的使用场景选择以下两种方案解决：

解决方案1：组件为全局通用组件 #

你可以单独创建一个共享组件模块统一管理全局通用组件：

1. 新建shared-components.module.ts文件，代码示例如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
// 替换为你自己的自定义组件实际路径
import { YourCustomComponent } from './path/to/your-custom.component';

@NgModule({
  declarations: [YourCustomComponent],
  imports: [
    // 导入提供*ngFor等基础指令的公共模块
    CommonModule,
    // 导入Ionic组件模块，支持ion-item等Ionic原生组件的使用
    IonicModule
  ],
  exports: [YourCustomComponent]
})
export class SharedComponentsModule {}

2. 在app.module.ts的imports数组中加入SharedComponentsModule，即可在全局所有页面使用该组件，*ngFor会正常生效。

解决方案2：组件仅为单个页面专用 #

如果该组件只会在某一个页面中使用，不需要全局复用，可以直接把组件声明到对应页面的模块中：
找到对应页面的模块文件（如home.module.ts），在declarations数组中加入你的自定义组件即可，页面模块本身已经默认导入了CommonModule，组件可以直接继承该模块的依赖能力。

注意事项 #

同一个组件不能同时声明到多个Angular模块中，否则会触发重复声明的报错，请根据组件的实际使用范围选择对应方案即可。

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