如何根据变量/用户输入显示产品星级？答案

【问题标题】：How can I display a products star rating based on a variable/user input?如何根据变量/用户输入显示产品星级？
【发布时间】：2021-01-03 05:33:28
【问题描述】：

我正在寻找一种在不使用设定值的情况下使用 Spring Boot/Java 显示星级的方法。如果我知道我想要显示的值，我可以显示星级，但如果它是基于用户评分平均值的变化数字，我如何传递变量以保持星级是最新的？我在网上找到的每个教程要么是接受星级的输入，要么是如何简单地显示星星。

我目前正在使用它作为显示 4.3 颗星的占位符。

<div class="Stars" style="--rating: 4.3;" aria-label="Rating of this product is 4.3 out of 5."></div>

我想找到一种方法，使用通过控制器传入的变量名称（平均用户评分）来显示此评分。我怎样才能做到这一点？任何帮助表示赞赏。

我正在编辑以添加 style.css 它正在计算如何根据 --rating 填充星星，但这是我不确定如何传递变量的地方。我认为我什至不需要 aria-label。

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}
.Stars::before {
  content: '★★★★★';
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

【问题讨论】：

你在 Spring 中使用什么库/框架？（花卉示例百里香）
我主要使用百里香叶，但也一直在使用一些引导程序

标签： java html css spring-boot thymeleaf

【解决方案1】：

由于您使用的是 thyemeleaf，

<div class="Stars">
<p style="--rating: 4.3;" th:text="Rating of this product is + ${the_average_user_rating} + out of 5."></p>
</div>

如果您愿意，也可以按照风格来做，而不是 4.3，${the_average_user_rating} 或您从控制器传递的任何名称。

【讨论】：

【解决方案2】：

以防万一有人遇到同样的问题，我解决了这个问题：

<div class="Stars" th:style="|--rating: ${averageRating}|" >
</div>

通过控制器传入averageRating。

【讨论】：