使用*ngFor遍历products数组时，如何将每个product传递给组件？

你的写法不符合Angular *ngFor的语法规范，所以setCurrentProduct(product)不会被执行。*ngFor的语法结构是let item of items; [index as idx]; [trackBy: trackFn]，并不支持在循环声明里直接调用自定义方法来赋值。

方案1：直接使用循环变量（推荐） #

不需要额外维护currentProduct，直接在模板里用遍历出来的product变量即可，代码更简洁且避免不必要的方法调用：

<div *ngFor="let product of products">
    <img class="img-fluid" 
       src="assets/img/category/{{product?.colors[0]?.images[0]}}">
</div>

方案2：若需遍历执行方法（不推荐，注意性能） #

如果确实需要在遍历每个product时执行方法逻辑，可以把方法调用放在模板的某个绑定属性中（比如[attr.data-product]），让变更检测触发方法执行：

<div *ngFor="let product of products" [attr.data-product]="setCurrentProduct(product)">
    <img class="img-fluid" 
       src="assets/img/category/{{currentProduct?.colors[0]?.images[0]}}">
</div>

组件中的方法：

setCurrentProduct(product: Product): string {
    this.currentProduct = product;
    // 返回空字符串，不影响属性渲染
    return '';
}

⚠️ 注意：这种方式会在每次变更检测时重复调用方法，可能引发性能问题，非必要不使用。

方案3：预处理数据（适合复杂逻辑） #

如果需要对每个product做预处理（比如提取默认图片路径），可以在组件中先处理好数据，再渲染：

// 组件中
processedProducts: Array<{ product: Product; defaultImage: string }> = [];

ngOnInit(): void {
    this.processedProducts = this.products.map(product => ({
        product,
        defaultImage: product.colors[0]?.images[0] || ''
    }));
}

模板中：

<div *ngFor="let item of processedProducts">
    <img class="img-fluid" 
       src="assets/img/category/{{item.defaultImage}}">
</div>

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