Angular 角度2重复一个图标，直到达到某个值

我在Angular 2的投资组合网站上工作，希望包括一个技能矩阵。这可以是任何svg图像或字符，但为了进行测试，我使用了font awesome提供的正方形

<tbody *ngFor="let skill of skills">
<tr>
     <td>{{skill.name}}</td>
     <td>{{skill.mastering}}</td>
     <td>{{skill.classification}}</td>
 </tr>

---

您可以使用以下示例：

<tbody>
  <tr *ngFor="let skill of skills">
     <td>{{skill.name}}</td>
     <td>
       <i *ngFor="let key of counter(skill.mastering)" class="fa fa-square" aria-hidden="true"></i>
     </td>
     <td>{{skill.classification}}</td>
  </tr>
</tbody>

{{skill.name}
{{skill.classification}

将其添加到组件中。ts

counter=Array

或者从这里选择另一种方法来获得相同的结果
如果我正确理解了你的问题，那么我认为你在寻找*ngIf

 <tbody *ngFor="let skill of skills">
    <tr>
         <td>{{skill.name}}</td>
         <td *ngIf="skill.mastering >0">
           <i class="fa fa-square" aria-hidden="true"></i>{{skill.mastering}}
         </td>
         <td>{{skill.classification}}</td>
     </tr>
 </tbody>


{{skill.name}
{{skill.mastering}}
{{skill.classification}

我认为你的*ngFor应该在
标签上，而不是
标签上

<tbody>
        <tr *ngFor="let skill of skills">
             <td>{{skill.name}}</td>
             <td *ngIf="skill.mastering >0">
               <i class="fa fa-square" aria-hidden="true"></i>{{skill.mastering}}
             </td>
             <td>{{skill.classification}}</td>
         </tr>
</tbody>


{{skill.name}
{{skill.mastering}}
{{skill.classification}
当我运行此代码时，我得到以下错误：core.umd.js:3525异常：app/app.component.html:9:13中的错误由以下原因引起：self.parentView.context.counter不是函数更新了答案，您还需要在组件中声明计数器。如果您只想在值超过0时显示一个正方形，那么您的答案是正确的。其思想是显示（值*平方）。所以8的值将产生8个正方形，6个正方形中的6个。@JanVanHaudt然后需要嵌套的*ngFor。在第二个*Ng上，对于一个数字，您可以使用管道从该数字创建数组。因为angular 2中不支持*ngFor on number。只需在检查此链接中重复*ngFor，了解如何使用管道创建阵列。我希望这会有所帮助：）
<tbody>
        <tr *ngFor="let skill of skills">
             <td>{{skill.name}}</td>
             <td *ngIf="skill.mastering >0">
               <i class="fa fa-square" aria-hidden="true"></i>{{skill.mastering}}
             </td>
             <td>{{skill.classification}}</td>
         </tr>
</tbody>