Angular中ngFor用三元运算符报错：无法绑定到'ngFor'

错误原因分析 #

你遇到的Can't bind to 'ngFor' since it isn't a known property of 'div'错误，核心问题是你把*ngFor的整个模板表达式拼接成了字符串（用三元运算符直接生成完整的ngFor语句字符串）。Angular的结构型指令（比如*ngFor）需要遵循特定的模板语法，不能通过字符串拼接的方式动态生成指令表达式——这种写法会让Angular把*ngFor当成一个普通的DOM属性，而非它内置的结构指令，自然会提示“属性不存在”。

另外你的formArrayName写法也不够规范：直接把三元运算符写在引号里，虽然语法上不会报错，但更严谨的方式是使用属性绑定语法（[]）来动态赋值。

修正后的代码 #

把*ngFor的数据源部分用三元运算符动态选择，而非拼接整个ngFor语句；同时修正formArrayName的绑定方式：

<div [formArrayName]="i === 0 ? 'viaOut' : 'viaIn'" fxLayout="row" fxLayoutGap="20px" *ngIf="viaOut">
  <div *ngFor="let via of (i === 0 ? newRequest.controls.roundway.controls[i].controls.viaOut.controls : newRequest.controls.roundway.controls[i].controls.viaIn.controls); let j=index">
    <!-- 你的子模板内容 -->
  </div>
</div>

进一步优化建议 #

模板里的newRequest.controls.roundway.controls[i].controls.xxx.controls路径太长，不仅可读性差，还容易出错。建议在组件类中定义一个getter方法来简化数据源获取：

// 组件类中
getCurrentViaControls(i: number) {
  const roundwayControl = this.newRequest.get('roundway') as FormArray;
  const currentRound = roundwayControl.at(i) as FormGroup;
  return i === 0 ? currentRound.get('viaOut') as FormArray : currentRound.get('viaIn') as FormArray;
}

然后模板可以简化成：

<div [formArrayName]="i === 0 ? 'viaOut' : 'viaIn'" fxLayout="row" fxLayoutGap="20px" *ngIf="viaOut">
  <div *ngFor="let via of getCurrentViaControls(i).controls; let j=index">
    <!-- 你的子模板内容 -->
  </div>
</div>

这样既提升了模板的可读性，也把复杂的表单控制逻辑从模板转移到了组件类中，更符合Angular的最佳实践。

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