call a method inside a ngFor in my html (angular6) - angular6

Question

I'm new to stackOverflow, couldn't find an answer to my question.
I'm trying to use an ngFor inside an ngFor.
Is it possible to call a method inside an *ngFor:
something like this :
<div *ngFor="let nbStar of myMethod(skill.level)">
where myMethod is using data from my first ngFor as parameter to generate an array of numbers.
my code:
<div *ngFor="let skill of skills">
<div class="picture">
<img src="{{skill.skillPicture}}"/>
</div>
<div class="title-skill">
<h3>{{skill.skillName | uppercase}} </h3>
Niveau:
<div *ngFor="let nbStar of generateStarsArray(skill.level)">
<i class="fas fa-star"></i>
</div>
</div>
</div>
Thanks a lot for any clues.

Answer 1

Yes you could use it. but make sure your method returns always an array.
For the following template
<div *ngFor="let skill of skills">
<div class="picture">
<img src="{{skill.skillPicture}}"/>
</div>
<div class="title-skill">
<h3>{{skill.skillName | uppercase}} </h3>
Niveau:
<div *ngFor="let nbStar of generateStarsArray(skill.level)">
<i class="fas fa-star"></i>
</div>
</div>
</div>
in component.ts method generateStarsArray should be something like below
public generateStarsArray(level): Array<any> {
let stars = [];
//---> some logic
return stars;
}