javascript - 如何在我的以下自定义 Angular 星评级示例中显示半星评级？

Question

组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  projectRating = 2;
  projectRatingArr=[];
  animeArr=[];
  counter;
  isHalf = false;
  ngOnInit() {
    this.updateStars();
     this.getArrayValues(0);
  }
  updateStars() {
    for(let i=0; i<this.projectRating;i++){
      this.projectRatingArr.push(i)
    }
    console.log(this.projectRatingArr);
  }
 getArrayValues(index) {
    setInterval(() => {
      if(index == this.projectRatingArr.length)
        return;
      this.animeArr.push(this.projectRatingArr[index]);
      index++;
    }, 50);
  }
}

html

<div class="wrapper">
    <div class="item">
        <div *ngFor="let i of [0,1,2,3,4]">
            <div class="fav fav-star-default "></div>
        </div>
    </div>
  <div class="item">
        <div *ngFor="let i of animeArr;last as isLast">
            <div class="fav fav-star is-animating"></div>
        </div>
    </div>
</div>

我尝试保留一个名为 isHalf 的变量，每当我将 ProjectRating 设为 4.5 或任何 (0.5) 时，我都必须在 ngFor 循环中获取最后一颗星并隐藏该元素的右半部分。

在做这件事的时候，我的想法已经用完了。

我只想在评分为 0.5 时将星修改为半星

我尝试在顶部添加一个类来隐藏，但仍然剩下一半看起来是空的。

任何帮助将不胜感激

这是我的 stackblitz 链接 https://stackblitz.com/edit/angular-joszev

Answer 1

为了达到预期的结果，请在下面使用两个额外的 div——一个是满星，一个是半星

1. 创建两颗星，条件是只有在评分为 0.5 时才显示

    <div class="item">
      <div *ngFor="let i of animeArr;last as isLast">
        <div class="fav fav-star is-animating" [ngClass]="{'isHalf': isHalf}"></div>
        <div class="halfstar1" *ngIf="isHalf">&#x2605;</div>
        <div class="halfstar2" *ngIf="isHalf">&#x2605;</div>
      </div>
    </div>

1. 为这两颗星添加下面的 CSS

     .halfstar1 {
        	position: absolute;
        	top: -6px;
        	right: 15px;
        	width: 34px;
        	font-size: 40px;
        	color: #666;
        	overflow: hidden;
        	z-index: 1;
        }
    
        .halfstar2 {
            position: absolute;
            top: -6px;
            right: 32px;
            width: 17px; 
            font-size: 40px;   
            color: rgb(252, 173, 3);
            overflow: hidden;
            z-index:2;
        }

供引用的工作代码 - https://stackblitz.com/edit/angular-krmrsj?file=src/app/app.component.css

注意:根据您的布局控制位置，此代码适用于 0.5 的最后一个值和其他小数值，需要调整正确的值