Angular父子组件传值报错：Property 'pod'不存在于ProductListComponent

• 错误原因：模板中*ngFor="Let pod of products"的Let是大写的，Angular模板指令要求循环变量声明必须用小写的let。大写的Let会被识别为要访问组件类的pod属性，但你的ProductListComponent类里并没有定义这个属性，因此触发报错。

• 修正步骤：

  1. 将模板里的大写Let改为小写let，正确的循环代码如下：

  <app-product *ngFor="let pod of products" [product]="pod"></app-product>
  

  2. 额外确认ProductListComponent中的products数组已正确初始化（避免循环无数据）：

  // product-list.component.ts
  import { Component } from '@angular/core';
  import { Product } from './product.model';
  
  @Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html'
  })
  export class ProductListComponent {
    // 示例初始化产品数据
    products: Product[] = [
      { id: 1, name: '测试产品1', price: 89 },
      { id: 2, name: '测试产品2', price: 129 }
    ];
  }
  

  3. 确保子组件的@Input绑定正确：

  // product.component.ts
  import { Component, Input } from '@angular/core';
  import { Product } from './product.model';
  
  @Component({
    selector: 'app-product',
    templateUrl: './product.component.html'
  })
  export class ProductComponent {
    @Input() product!: Product;
  }
  

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