角度2値に達するまでアイコンを繰り返します。

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までの値であると考えはskill.mastering値に達するまで、各番号の<i class="fa fa-square" aria-hidden="true"></i>一度使用することです。私はこれをどのように実装するのか分かりません。他の言語で、私は擬似でこのような何かを記述します。

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.tscounter = 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>