Angular中ngFor搭配keyvalue管道报unknown不可分配给NgIterable错误

报错原因 #

keyvalue 管道默认返回的每一项的 value 是 unknown 类型，TypeScript 无法识别该值是可遍历的数组，所以会抛出类型不匹配的错误。

解决方案 #

方案1：给变量定义明确类型（推荐，符合TS类型规范） #

先在组件的TS文件中定义对应的数据结构接口：

// 定义科目结构
interface Subject {
  id: number;
  standard_id: number;
  name: string;
  deleted_at: null | string;
  created_at: string;
  updated_at: string;
}
// 定义考试结构
interface Exam {
  id: number;
  standard_id: number;
  user_id: number;
  subject_id: number;
  exam_date: string;
  start_time: string;
  end_time: string;
  description: null | string;
  deleted_at: null | string;
  created_at: string;
  updated_at: string;
  subject: Subject;
  // 如果你模板里用到了user.name，需要补充user字段的类型，且确保接口返回该字段
  user?: {
    name: string
  }
}
// 声明exams的类型
exams: Record<string, Exam[]> = {};

定义完类型后，TypeScript 就能识别 item.value 是 Exam 类型的数组，可直接用 *ngFor 遍历，无需修改模板代码。

方案2：模板内临时类型断言（快速修复） #

如果只需要快速调试不想补全类型，可以在模板里用Angular提供的$any()方法跳过类型检查，把第二层遍历的代码改成：

<ion-item *ngFor="let items of $any(item.value)">

方案3：组件内预处理数据 #

你也可以在组件拿到接口数据后，直接把对象转为数组，不需要使用keyvalue管道，遍历逻辑更清晰：

// 预处理后的数据结构
examList: {date: string, exams: Exam[]}[] = [];

// 拿到接口返回的exams后处理
this.examList = Object.entries(this.exams).map(([date, exams]) => ({
  date,
  exams
}))

模板里直接遍历预处理后的数组即可：

<ion-accordion value="{{item.date}}" *ngFor="let item of examList">
  <ion-item slot="header">
    <ion-icon slot="start" name="calendar-outline" color="danger"></ion-icon>
    <ion-label>Exam Date: {{item.date}}</ion-label>
  </ion-item>
  <ion-list slot="content">
    <ion-item *ngFor="let exam of item.exams">
      <!-- 原有内容不变 -->
    </ion-item>
  </ion-list>
</ion-accordion>

额外注意 #

你当前模板中使用了{{items.user.name | titlecase}}，但你提供的原始数据里Exam对象只有user_id，没有user关联字段，后续运行时会出现取值错误，需要确保接口返回数据中包含user关联信息，或者在组件内提前把用户信息补入考试对象中。

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