Angular报错：Type 'Catlist'不可赋值给NgIterable<any>|null|undefined

错误核心原因：*ngFor指令要求遍历的对象必须是可迭代类型（比如数组、Set等），但你的data是Catlist类型的单个对象，它本身不具备可迭代性，真正的数组数据是它内部的images属性。

两种修复方案： #

方案1：直接存储数组数据（推荐）

修改组件类，将data定义为Image[]类型，直接赋值接口返回的images数组：

// 组件类中定义数据类型
data: Image[] = [];

ngOnInit(): void {
  this.unsubscribe = this.catService.getAllCat().subscribe((res: Catlist) => {
    this.data = res.images; // 赋值数组而非整个对象
  })
}

HTML保持原有循环逻辑即可：

<div class="separate" *ngFor="let cat of data">
    <img [src]="cat.url">
</div>

方案2：保留Catlist类型，遍历内部数组

如果需要保留data的Catlist类型，直接在HTML中遍历它的images属性，同时用?.避免初始值为undefined时的报错：

<div class="separate" *ngFor="let cat of data?.images">
    <img [src]="cat.url">
</div>

组件类代码无需修改。

补充说明 #

你的接口定义和服务逻辑都是正确的，JSON返回的确实是包含images数组的对象，问题仅在于*ngFor的遍历目标错误，只要明确遍历的是数组而非单个对象即可解决。

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