Angular提示ngFor变量需在组件中绑定？问题咨询

报错原因 #

你错误地在<ng-content>标签上使用了*ngFor指令。<ng-content>的核心作用是内容投影，用于接收组件外部传入的内容，它本身不支持*ngFor这类结构型指令。当Angular解析模板时，无法识别<ng-content>上的循环变量color，会默认将其当作组件类（SelectedProductComponent）的属性，而你的组件类里并没有定义color，因此触发了Property 'color' does not exist的错误。

修复方法 #

替换<ng-content>为<ng-container>（Angular专用的无DOM逻辑容器），或者直接将*ngFor绑定到<img>的父元素上：

方案一：使用<ng-container> #

<div class="me-2">
  <ng-container *ngFor="let color of colorImgs">
    <img class="highlight-border-2" src="assets/img/{{color.img}}">
  </ng-container>
</div>

方案二：直接绑定到<img>元素 #

如果不需要额外的包裹容器，也可以直接把*ngFor放在<img>上：

<div class="me-2">
  <img *ngFor="let color of colorImgs" class="highlight-border-2" src="assets/img/{{color.img}}">
</div>

<ng-container>不会生成额外的DOM节点，专门用来承载*ngFor、*ngIf这类结构型指令，是处理这类逻辑的标准方式。

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