Блог

Я использую ng-рейтинг для отображения среднего значения оценки. Проблема в том, что среднее значение равно 3,97. Ng-рейтинг по-прежнему отображает его как 3 звезды. Как я могу сделать так, чтобы он отображался как половина звезды? мой html:

 <div style="font-size: x-large; color: orange;"><ngb-rating [max]="5" [(rate)]="overallScore" [readonly]="false"></ngb-rating></div>
 

Пример для значения 3,67:
звезда

Редактировать: при попытке решения с сайта начальной загрузки 4 сердца, заполнение сердца немного квадратное?

Правка2:

Шаблон:

 <ng-template #t let-fill="fill">
        <span class="star" [class.full]="fill === 100">
          <span class="half" [style.width.%]="fill">⭐</span>⭐
        </span>
    </ng-template>
 

Я изменил код на css

  .star {
        position: relative;
        display: inline-block;
        font-size: 3rem;
        color: #d3d3d3;
    }
    .star.full {
        color: #ffa600;
    }
    .star.half {
        position: absolute;
        display: inline-block;
        overflow: hidden;
        color: #ffa600;
    }
 

и это дает такой результат:
звезды

Для пользовательского шаблона с десятичными дробями вы можете использовать следующее:

 <ng-template #scoreTemplate let-fill="fill">
    <span class="star" [class.full]="fill === 100">
      <span class="half" [style.width.%]="fill">⭐</span>⭐
    </span>
</ng-template>

<ngb-rating max="5"
  [(rate)]="overallScore"
  [readonly]="true"
  [starTemplate]="scoreTemplate">
</ngb-rating>
 

но вам также нужны стили:

 .star {
  position: relative;
  display: inline-block;
  font-size: 3rem;
  color: #d3d3d3;

  amp;.full {
    color: #ffa600;
  }

  amp;.half {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    color: #ffa600;
  }
}
 

Только для половины звезды и не для всех десятичных знаков вы можете использовать:

 <ng-template #scoreTemplate let-fill="fill">
    <span class="star" [class.full]="fill < 50">
      <span class="half" [style.width.%]="fill >= 50 ? 50 : 0">⭐</span>⭐
    </span>
</ng-template>
 

Кроме того, вы можете заменить эмодзи своим пользовательским значком.