如何在我的以下自定义角度星级示例中显示半星评级？答案

【问题标题】：How to display half star rating in my following custom angular star rating example?如何在我的以下自定义角度星级示例中显示半星评级？
【发布时间】：2021-12-07 20:06:55
【问题描述】：

组件.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

【问题讨论】：

也许 css 渐变可以在某些方面有所帮助？否则我会考虑制作你自己的 svg 并填充一半的星星，这可能是实现这一目标的最简单方法。
用NgBootstrap's Rating Component怎么样？
@SiddAjmera - 有趣的是，“自定义十进制评级”示例目前似乎不适用于 ng-bootstrap component。
@ConnorsFan，我确实注意到了。 :) 一段时间后我可能会举出一个例子。

标签： javascript css angular

【解决方案1】：

为了达到预期的效果，请使用以下两个额外的 div - 一个带有全星和半星

创建两颗星，条件只有在评分为 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>

在 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 的值，对于其他十进制值，需要调整正确的值

【讨论】：

【解决方案2】：

你可以填写你的数组：

1 = 满星； 0.5 = 半星；

在您的 html 中添加 [ngClass]='colorStar(i)'。您的函数将根据您的值返回一个或另一个类，并且使用 CSS 您可以为半星或全星着色。

类似这样的：http://jsfiddle.net/Ah8uZ/

<div class="star gold">&#x2605;</div>
<div class="star gold-gray">&#x2605;</div>
<div class="star gray">&#x2605;</div>



.star {
    display: inline-block;
    width: 20px;
    text-align: center;
}
.star.gold { color: gold; }
.star.gold-gray { color: gray; }
.star.gold-gray:after {
    display: inline-block;
    color: gold;
    content: '\2605';
    position: absolute;
    margin-left: -16px;
    width: 8px;
    overflow: hidden;
}
.star.gray { color: gray; }

【讨论】：

【解决方案3】：

<span class="material-icons filled iconRatingStar" *ngFor="let item of [0,1,2,3,4]; let i = index">
        {{(i + 1) <= value? 'star_rate' : (value % 1 !==0 && (value | round)===(i + 1))?'star_half':'star_outline'}} 
    </span>

'value' 是评级数字。只是值 = 3.5

添加了圆管

@Pipe({ name: 'round' }) export class RoundPipe {
transform(input: number) {
    return Math.round(input);
}}

【讨论】：