Angular升级至v14后编译报错TS2322:unknown无法赋值给NgIterable<any>

问题现象 #

• 自定义fq-table数据表格组件在Angular 14以下版本可正常运行
• 升级到Angular v14后编译抛出错误：error TS2322: Type 'unknown' is not assignable to type 'NgIterable<any>'
• 组件TS中已声明@Input() tableData: any[] = []，且组件已在SharedModule中声明并导出

相关代码 #

组件TS定义 #

// 导入项省略
@Component({
  selector: 'fq-table',
  templateUrl: './fq-table.component.html',
  styleUrls: ['./fq-table.component.scss']
})
export class FqTableComponent implements OnInit {
 @Input() tableData: any[] = [];
 // 其余业务逻辑省略
}

SharedModule配置 #

@NgModule({
  declarations: [
    FqTableComponent,
    FqInputComponent,
    NotFoundComponent,
    FqPaginationPipe
    // 其余声明项省略
  ],
  providers: [ThemeService],
  imports: [
    NgbModule,
    CommonModule,
    BrowserModule,
    RouterModule,
    ReactiveFormsModule,
    FormsModule,
    BrowserAnimationsModule,
    MatTooltipModule
    // 其余依赖模块省略
  ],
  exports : [
    NgbModule,
    CommonModule,
    BrowserModule,
    RouterModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    // 自定义组件
    FqTableComponent,
    FqInputComponent,
    NotFoundComponent,
    // 自定义管道
    FqPaginationPipe
  ]
})
export class SharedModule { }

根因 #

Angular 14默认启用严格模板类型检查，*ngFor指令要求传入的迭代对象必须符合NgIterable<any>类型约束。虽然在TS类中声明tableData为数组类型，但模板中对该变量的处理（管道转换、安全导航符取值、链式调用等操作）会导致类型推断链路断裂，编译器最终将迭代目标识别为unknown类型，触发类型不匹配错误。
另外当前SharedModule存在不规范配置：BrowserModule、BrowserAnimationsModule是根模块（AppModule）专属导入项，在共享模块中导入导出这类模块在高版本Angular中也可能引发类型识别异常。

解决步骤 #

按优先级依次尝试：

• 给模板中*ngFor的迭代目标增加类型包裹
  找到组件模板中遍历表格数据的*ngFor语句，用$any()包裹迭代目标，绕过局部类型检查，示例：

  <!-- 原写法 -->
  <tr *ngFor="let row of tableData | tableTransform">
  <!-- 修改后 -->
  <tr *ngFor="let row of $any(tableData | tableTransform)">
  

  如果遍历的是tableData的子属性，同样用$any()包裹即可：

  <tr *ngFor="let row of $any(tableData?.list)">
  

• 修正SharedModule不规范配置
  移除SharedModule中对BrowserModule、BrowserAnimationsModule的导入和导出，这类模块仅能在AppModule中导入。共享模块中只需要保留CommonModule来提供*ngFor、*ngIf这类基础指令。
• 优化Input属性类型定义
  避免直接使用any[]，定义明确的行数据类型，帮助编译器正确推断类型：

  // 定义表格行数据类型
  interface TableRow {
    [key: string]: any;
  }
  
  @Component({/* 组件元数据省略 */})
  export class FqTableComponent implements OnInit {
   @Input() tableData: TableRow[] = [];
  }
  

• （不推荐） 全局关闭严格模板检查
  如果项目不需要严格模板校验，可在tsconfig.json中关闭对应配置：

  {
    "angularCompilerOptions": {
      "strictTemplates": false
    }
  }
  

  该方案会全局丢失模板类型校验能力，可能掩盖其他潜在类型问题，非必要不使用。

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