Angular中*ngFor读取Object类型data属性报错问题咨询

两个报错均由TypeScript类型校验不匹配导致：

• 组件内将users变量声明为通用Object类型时，TS无法识别该类型存在data属性，访问users.data就会抛出*Property 'data' does not exist on type 'Object'*错误
• *ngFor指令要求遍历目标必须是可迭代类型（数组、类数组等），通用Object不符合可迭代类型约束，直接遍历users时就会抛出*Type 'Object' is not assignable to type 'NgIterable | null | undefined'*错误

具体修复步骤 #

1. 定义接口返回结构对应的TS类型 #

根据reqres接口的固定返回结构，定义用户对象和接口响应对应的TS类型（如果不想写完整类型，可临时用any类型快速绕过校验，但会丢失类型提示能力，不推荐生产环境使用）：

// 用户对象结构
interface User {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

// 接口整体响应结构
interface UserResponse {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: User[];
}

你可以把上述类型定义放在组件顶部，也可以抽成全局类型文件方便复用。

2. 修改组件内的变量类型声明 #

将原来users: Object;的声明改为对应响应类型，同时给初始值避免空值报错，修改后的组件TS代码如下：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

// 此处放上述定义的User、UserResponse接口
interface User {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

interface UserResponse {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: User[];
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  // 替换原有Object类型，联合null类型匹配初始空状态
  users: UserResponse | null = null;

  constructor(private data: DataService) { 
  }

  ngOnInit() {
    this.data.getUsers().subscribe(data => {
      this.users = data
      console.log(this.users)
    })
  }
}

3. 调整服务层请求方法，添加泛型类型 #

修改DataService的getUsers方法，通过泛型指定请求返回的响应类型，让TS可以正确推导返回值：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// 类型路径根据你的项目实际结构调整，如果类型抽成了单独文件就对应改导入路径
import { UserResponse } from '../home/home.component';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(public http: HttpClient) { }

  getUsers() {
    // 加泛型指定响应类型
    return this.http.get<UserResponse>('https://reqres.in/api/users')
  }
}

注意：原服务代码中导入的HttpClientModule不需要在服务层引入，只需要在根模块AppModule的imports数组中导入HttpClientModule，即可全局使用HttpClient服务。

4. 模板代码无需调整 #

原有HTML模板中*ngFor="let user of users.data"的写法完全匹配接口返回结构，类型修正后，*ngIf="users"的判断会保证只有在接口数据返回后才会遍历users.data，不会再报类型错误。

临时快速修复方案：如果只是做演示不想写类型定义，直接将组件内users: Object;改为users: any;即可绕过TS类型检查，两个报错都会立刻消失，但正式项目不推荐这种写法。

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