Angular：如何将数组作为数据绑定值传递？类型丢失问题排查

开发者阿泽

2026-8-20

解决Angular组件传递对象数组的问题

你的问题核心是绑定方式错误，导致数组被强制转换成了字符串，同时TypeScript的类型标注仅在编译阶段生效，运行时不会自动转换对象类型。

1. 修复数据绑定方式

在FoodListPage的HTML中，你使用了插值表达式{{foods}}传递数组，这会把数组转成字符串（也就是你看到的[object Object],[object Object],...）。Angular中传递对象或数组必须使用属性绑定语法（方括号[]）：

修正后的HTML代码：

<ion-content>
  <app-header title="{{category}}"></app-header>
  <app-food-listing [values]="foods"></app-food-listing> <!-- 用方括号实现属性绑定 -->
  <app-nav-button page="main-menu"></app-nav-button>
</ion-content>

2. 关于TypeScript类型的说明

你在代码里标注了foods: IValues[]，但TypeScript的接口/类型别名是编译时类型检查工具，运行时不存在实际的类型信息。从路由state中获取的原始数据本身就是普通JS对象，所以即使标注了类型，运行时它依然是普通对象——这是TypeScript的特性，并非Angular的问题。

如果IValues是一个类（而非接口），你需要手动将普通对象转换为类实例，才能在运行时拥有类的方法和属性：

// 假设IValues是定义好的类
export class IValues {
  name: string;
  price: number;
  // 类的其他属性或方法
}

// 在FoodListPage的构造函数中转换数据
this.foods = this.router.getCurrentNavigation().extras.state.values.map(item => {
  const food = new IValues();
  Object.assign(food, item);
  return food;
});

如果IValues只是接口，则不需要转换，只要数据结构匹配接口定义，编译时就能通过类型检查，运行时即使是普通对象，也不影响你按接口定义的属性进行访问。