Getting error NG0901 in ngfor loop in Angular-CodePudding

I'm trying to render options inside select field by using defined array in ts file as below. My angular version is 13

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

My HTML code as below

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

But I'm getting this error inside my browser console

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)

Solution

I was able to find solutions as above but those describe the error is because of users have use *ngfor for render the Json objects instead of the arrays.

Since I'm using the array already, but I'm bit confused about those solutions.

CodePudding user response：

I think you should use the ng-container instead of ng-template

Hope to help you.

CodePudding user response：

*ngFor directive inside a element, which is not allowed. To fix this error, you should move the *ngFor directive to the element like this:

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