Angular中如何将对象转换为模型数组并赋值给变量

你目前的问题核心是接口字段大小写不匹配、IResponse的data类型定义不准确，导致无法正确赋值和访问属性。以下是具体修正步骤：

1. 修正类型定义 #

调整IResponse为泛型接口 #

这样可以明确指定data的具体类型，避免不安全的类型断言：

export interface IResponse<T> {
  data: T;
  status: number;
}

统一Product接口字段名（推荐） #

API返回的是小驼峰格式（id、title等），而你的Product接口用的是大驼峰，TypeScript不会自动转换字段名，所以需要把接口改成和API一致的小驼峰：

export interface Product {
  id: string;
  title: string;
  description: string;
  imageUri: string;
  categoryId: string;
}

2. 修改服务代码 #

更新getProducts方法的返回类型，使用泛型的IResponse：

export class ProductListService {
  constructor(private httpClient: HttpClient) {}

  getProducts(): Observable<IResponse<Product[]>> {
    return this.httpClient.get<IResponse<Product[]>>('https://localhost:7127/Product/GetProductList');
  }
}

3. 组件中直接赋值 #

现在可以安全地将response.data赋值给products，无需类型断言：

getProducts(): void {
  this.productsService.getProducts()
    .subscribe((response) => {
      this.products = response.data;
    });
}

如果你坚持使用大驼峰的Product接口 #

如果不想修改Product的字段名，需要手动映射字段：

// 组件代码
getProducts(): void {
  this.productsService.getProducts()
    .subscribe((response: IResponse<any[]>) => {
      this.products = response.data.map(item => ({
        Id: item.id,
        Title: item.title,
        Description: item.description,
        ImageUri: item.imageUri,
        CategoryId: item.categoryId
      }));
    });
}

这种方式虽然能实现字段映射，但需要手动维护映射关系，不如统一字段名简洁可靠。

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