Question

我是stackOverflow的新手，找不到我的问题的答案。我正在尝试在ngFor中使用ngFor。是否可以在* ngFor内调用方法：像这样的东西：

    <div *ngFor="let nbStar of myMethod(skill.level)">

其中，myMethod使用第一个ngFor中的数据作为参数来生成数字数组。

我的代码：

<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>

非常感谢您提供任何线索。

Answer 1

是的，您可以使用它。但请确保您的方法始终返回一个数组。

对于以下模板

<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>

component.ts方法generateStarsArray中的

应该如下所示

 public generateStarsArray(level): Array<any> {
     let stars = [];
     //---> some logic
     return stars;
 }

在我的html（angular6）的ngFor内调用方法

1 个答案: