Angular报错TS2322: 类型无法分配给NgIterable类型如何解决

报错根本原因 #

你定义的ICategory接口中child字段类型与实际API返回结构不匹配：你将child声明为单个对象类型，但接口返回的child是子分类数组，*ngFor只能遍历可迭代的集合（比如数组），因此抛出类型不匹配错误。

具体修改步骤 #

1. 修正ICategory接口定义 #

将child字段改为数组类型，且子分类结构和父分类一致，可直接复用ICategory接口：

export interface ICategory {
  id?: number;
  name: string;
  parent_id?: number | null; // 父分类的parent_id为null，补充null类型适配
  child?: ICategory[]; // 修改为数组类型适配接口返回
}

2. （可选）优化Service类型声明 #

避免使用any类型，补充接口返回结构的类型定义，让类型校验更严谨：

// 先定义API统一返回结构
interface IApiResponse<T = any> {
  message: string;
  error: boolean;
  code: number;
  results: T;
}

// 修改Service方法返回类型
public getCategories(): Observable<IApiResponse<{categories: ICategory[]}>> {
  return this.http.get<IApiResponse<{categories: ICategory[]}>>(this.api.baseURL + 'categories/list', this.httpOptions);
}

3. 修正模板和事件绑定的其他隐藏问题 #

同步修改几处会导致运行异常的错误：

• 弹窗模板中{{ Category.name || 'N/A' }}变量名错误，组件中定义的变量是小写开头的category，改为{{ category.name || 'N/A' }}
• 列表按钮的点击事件和弹窗target不匹配：你按钮绑定的是editCategoryModal方法，且data-target指向#editCategoryModal，但实际定义的方法是viewCategoryModal、弹窗id是viewCategoryModal，修改按钮代码为：

<a class="btn btn-info btn-sm" (click)="viewCategoryModal(row)" data-toggle="modal" data-target="#viewCategoryModal">
  Edit
</a>

修改完成后重新编译即可解决报错，子分类列表会正常渲染。

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