如何在模板中使用* ngFor编写css类

Question

我正在尝试在angular4 * ngFor中编写以下内容 我想要的东西：   

      public stars: any[] = new Array(5);

        <ul class="rating inline-ul">
          <li *ngFor="let star of stars; let i = index">
            <i class="fa" *ngIf="starValue >= i + 0.5" 
            [ngClass]="{'fa-star-half-o amber-text': starValue >= i + 0.5 
            && starValue < i + 1, 'fa-star amber-text': starValue >= i + 1}">
           </i>
          </li>
        </ul>

不幸的是，上面的代码给了我这个：

我怎样才能实现这个目标，* ngFor？

Answer 1

除了else *ngIf的{​​{1}}部分外，您完全正确。

<div class="rating inline-ul">
 <span *ngFor="let star of stars; let i = index">
  <i class="fa" *ngIf="starValue >= i + 0.5; else star" [ngClass]="{
    'fa-star-half-o amber-text': starValue >= i + 0.5 && starValue < i + 1, 
    'fa-star amber-text': starValue >= i + 1
  }">
  </i>
  <!-- else part -->
  <ng-template #star>
      <i class="far fa-star"></i>
  </ng-template>
 </span>
</div>

Answer 2

以下将是合适的：

<ul class="rating inline-ul">
  <li *ngFor="let star of stars; let i = index">
    <i   
    [class.fas]="i+0.5 < starValue || i+0.5 == starValue" 
    [class.far]="i > starValue"  
    [class.fa-star]="i+0.5 < starValue || i > starValue"  
    [class.fa-star-half]="i+.5 == starValue" >
    </i>
    <span *ngIf="i+.5 < starValue">fas fa-star</span>
    <span *ngIf="i+.5 == starValue">fas fa-star-half</span>
    <span *ngIf="i > starValue">far fa-star</span>
  </li>
</ul>

Answer 3

Yo可以从以下StackBlitz URL找到实现： https://stackblitz.com/edit/angular-kbmtmv