Angular 13中使用*ngFor渲染select选项时出现NG0901错误

问题重现 #

你在Angular 13中定义了如下数组：

roles = [
  { id: 0, name: "Perfect" },
  { id: 1, name: "Low" },
  { id: 2, name: "Minor" },
  { id: 3, name: "High" }
];

并尝试用以下HTML渲染select选项：

<select>
  <ng-template *ngFor="let role of roles">
    {{role?.name}}
  </ng-template>
</select>

但控制台抛出NG0901错误，且你发现相关解决方案提到该错误源于渲染JSON对象而非数组，但你确认使用的是数组，因此感到困惑。

错误原因 #

NG0901错误在这里的根源不是数组类型问题，而是你错误地使用了<ng-template>来渲染select选项：

• <ng-template>是Angular的占位符模板，不会被直接渲染到DOM中，select元素需要的是<option>子元素来定义选项。
• 将*ngFor应用在<ng-template>上时，Angular无法正确将模板内容关联到select的DOM结构，导致变更检测流程出错，触发NG0901错误。

解决方案 #

将<ng-template>替换为<option>标签，并将*ngFor指令直接应用在<option>上，同时可以通过[value]绑定选项的id值：

修正后的HTML代码 #

<select>
  <option *ngFor="let role of roles" [value]="role.id">
    {{role.name}}
  </option>
</select>

说明 #

• <option>是select元素的合法子元素，Angular可以正确识别并渲染这些选项。
• [value]="role.id"将选项的value属性绑定到角色的id，方便后续获取选中的id值；如果不需要绑定id，也可以省略该属性。
• 由于roles是确定的数组，role?.name中的可选链操作符?.可以省略，直接使用role.name即可。

内容的提问来源于stack exchange，提问作者H.K.H. MADUSHANKA