Question

我正在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>

skill.mastering是一个从0到10的值，其思路是每次使用<i class="fa fa-square" aria-hidden="true"></i>一次，直到达到skill.mastering值。我不知道如何实现这一点。在任何其他语言中，我会用伪写出这样的东西：

while skill.mastering > 0
print square

Answer 1

您可以使用此示例：

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

将此添加到 component.ts counter = Array;

或者选择另一种方式如何从Angular 2 - NgFor using numbers instead collections

获得相同的结果

Answer 2

如果我理解你的问题，那么我认为你正在寻找* 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>

我认为你的* ngFor应该在<tr>代码而不是<tbody>代码

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

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

2 个答案: