在Angular的ngfor循环中出现NG0901错误

Question

我试图通过在ts文件中使用定义的数组在选择字段内呈现选项，如下所示。我的angular版本是13

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

我的HTML代码如下

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

但是在浏览器控制台中出现了这个错误

ERROR Error: NG0901
at e.find (main.js:1:989143)
at P.ngDoCheck (main.js:1:778652)
at qi (main.js:1:828777)
at Fi (main.js:1:828549)
at ms (main.js:1:828269)
at Vf (main.js:1:862353)
at Module.Wf (main.js:1:862198)
at Z (1410.js:1:8251)
at md (main.js:1:866002)
at iu (main.js:1:864654)

解决方案

我能够找到如上所述的解决方案，但那些描述错误是因为用户使用*ngfor来渲染Json对象而不是数组。

因为我已经在使用数组了，但是我对这些解决方案有点困惑。

Answer 1

我认为你应该使用ng-container而不是ng-template

希望能帮到你。

Answer 2

*ngFor指令，这是不允许的。要修复这个错误，你应该像这样把*ngFor指令移动到元素中:

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