Question

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

您可以填写以下数组：

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

Answer 2

要获得预期的结果，请在下面使用另外两个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 个答案: