Angular项目报错TS2322：类型不匹配问题求助

问题原因 #

Angular的HttpClient.get()默认返回类型为Observable<Object | null>，而*ngFor指令要求迭代对象必须是可迭代类型（如数组），TypeScript类型校验不匹配，因此抛出该错误。

解决方案 #

1. 定义房屋数据类型（推荐） #

创建接口规范房屋数据结构，提升类型校验严谨性。可以在组件文件中定义，或单独新建home.model.ts文件：

export interface Home {
  image_url: string;
  type: string;
  location: string;
  title: string;
}

2. 修改数据服务的请求类型 #

在data.service.ts中，为getHomes()方法指定返回类型为Observable<Home[]>，明确HTTP请求返回的是房屋数组：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Home } from './home.model'; // 若接口在单独文件需导入

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private httpClient: HttpClient) { }

  getHomes(): Observable<Home[]> {
    return this.httpClient.get<Home[]>('assets/homes.json');
  }
}

3. 更新组件的类型声明 #

在homes.component.ts中，明确homes$的类型为Observable<Home[]>：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Observable } from 'rxjs';
import { Home } from './home.model';

@Component({
  selector: 'app-homes',
  templateUrl: './homes.component.html'
})
export class HomesComponent implements OnInit {

  homes$: Observable<Home[]> = this.dataService.getHomes();

  constructor(private dataService: DataService) { }

  ngOnInit() {
  }

}

4. 优化模板（可选） #

添加空值判断避免数据未加载时的异常，同时改用Angular推荐的属性绑定方式：

<div class="uk-container uk-padding">
    <h1>Homes</h1>
    <div *ngFor="let home of homes$ | async || []">
        <div class="uk-card">
            <div class="uk-card-media-top">
                <img [src]="home.image_url">
            </div>
            <div class="uk-card-body">
                <div>
                    {{ home.type }} / {{ home.location }}
                </div>
                <div>
                    {{ home.title }}
                </div>
            </div>
        </div>
    </div>
</div>

原理说明 #

通过为HttpClient.get()指定泛型<Home[]>，告知TypeScript请求返回的是房屋对象数组，此时homes$的类型为Observable<Home[]>，经过async管道订阅后得到可迭代的数组，完全符合*ngFor的类型要求，类型校验即可通过。

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