Angular使用ngFor时报Property 'id' does not exist on type 'Object'如何解决

该报错由TypeScript静态类型检查机制触发：

• 代码中给products数组声明的类型为Object[]，JavaScript原生顶层Object类型本身不存在id、name自定义属性
• Angular编译阶段会校验模板中绑定的属性是否匹配变量的类型声明，找不到对应属性就会抛出TS2339错误

方案1：快速适配 #

你已经验证可用的修改方式，将数组类型改为any[]跳过类型检查即可，修改组件中的变量声明代码：

// 修改前
products:Object[];
// 修改后
products:any[];

该方案改动量小，适合临时调试验证逻辑，缺陷是会丢失TypeScript的类型校验能力，不推荐在正式项目中长期使用。

方案2：标准类型定义（更推荐） #

先定义对应的数据结构接口，再给数组声明对应接口类型，既可以解决编译报错，还能保留TypeScript的类型校验能力：

import { Component, OnInit } from '@angular/core';

// 提前定义Product数据接口
interface Product {
  id: string;
  name: string;
}

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  // 数组类型声明为Product[]
  products:Product[];

  constructor() {
    this.products = [
        {
          id: "1",
          name:"Mac Book Pro"
        },
        {
          id: "2",
          name:"iPhone"
        }
    ];
  }

  public getProducts(){
    return this.products;
  }

  ngOnInit(): void {
  }
}

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