如果从服务器加载现有数据，离子更改图标颜色更改将失败
对于这个主题很抱歉，不确定如何恰当地描述它。
我对特定的内容有一个评级系统。评等页面以模式显示。用户第一次对内容进行评分时，一切都正常。如果用户没有刷新来自服务器的数据，他们可以返回到相同的评论/模式并编辑他们的评论-包括更改评级，从而改变星星的颜色(1到5星)。
但是，如果用户刷新数据或第一次打开应用程序，从服务器拉取数据，则打开的模式会显示其先前条目的所有正确评级和评论-但如果用户想要更改之前为其指定的星级(首先对2进行评级，然后在新的服务器数据加载后，将评级更改为4)，则星级上的颜色不会改变，即使从函数中记录的数据显示的值为4....visually没有更改，它仍然只显示两个颜色的星级
我打印出控制台消息，因为它迭代通过星/评级颜色函数，和控制台消息显示正确的颜色是assigned....but的实际颜色没有改变。
相关CSS：
.reviewColor {
color: lightgray ;
}模式：
<ion-modal-view class="modalReviews">
<ion-header-bar>
<div class="headerBar">
<div class="headerBarDiv">PRODUCT REVIEW</div>
<button type="button" class="button button-block button-small-custom headerBarButton" ng-click="closeReviews()"> X </button>
</div>
</ion-header-bar>
<ion-content>
<div id="reviewWrapper">
<div ng-if="doReview == 1" id="doReview" class="prodSection prodReviewCard">
<div ng-if="prod.reviews.userReviewDate != 0">
Last review submitted on: {{prod.reviews.userReviewDate}}
</div>
<div class="" style="text-align:center;">
<i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_1" ng-click="reviewRating('Rating',prod.ceID,1);" ng-style="1 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
<i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_2" ng-click="reviewRating('Rating',prod.ceID,2);" ng-style="2 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
<i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_3" ng-click="reviewRating('Rating',prod.ceID,3);" ng-style="3 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
<i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_4" ng-click="reviewRating('Rating',prod.ceID,4);" ng-style="4 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
<i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_5" ng-click="reviewRating('Rating',prod.ceID,5);" ng-style="5 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
</div>
<div style="margin-top:10px;">
<textarea style="border:1px solid lightgray;width:100%;height:100px;" maxlength="255" ng-model="userReview" id="userReview">{{prod.reviews.userReview}}</textarea>
</div>
<div style="margin-top:20px;">
<input type="checkbox" id="userAnon" ng-model="userAnon" ng-true-value="'{{userDisplayName}}'" ng-false-value="'Anonymous'" style="margin-left:25px;margin-right:5px;vertical-align:bottom;width:20px;height:20px;" ng-checked="prod.reviews.userAnon != 'Anonymous'"></input>Display '{{userDisplayName}}' with review?
</div>
<div style="margin-top:20px;">
<button type="button" class="button button-block button-large-custom" ng-click="reviewSubmit();">
Submit Review
</button>
</div>
<div style="margin-top:15px;color:{{reviewColor}};">{{reviewMsg}}</div>
</div>
</div>
</ion-content>控制器函数用于直观地更改星形颜色：
$scope.reviewRating = function(idName,ID,rating) {
for (var i=1;i<=5;i++) {
var tName = idName+ "_" +ID+ "_" +i ;
console.log(tName) ;
var star = document.getElementById(tName) ;
if (i <= rating) {
console.log("Orange") ;
star.style.color = eColors.orange + " !important" ;
} else {
console.log("Gray") ;
star.style.color = "lightgray !important" ;
}
}
$scope.userRating = rating ;
console.log("new rating: " +$scope.userRating) ;
}函数控制台消息显示函数正在正确执行，并将正确的值指定为新的$scope.userRating -但同样，在视觉上，没有任何变化，它仍然只显示两颗星被涂成橙色：
Rating_1135_1 = Orange controllers.js:2705
Rating_1135_2 = Orange controllers.js:2705
Rating_1135_3 = Orange controllers.js:2705
Rating_1135_4 = Orange controllers.js:2705
Rating_1135_5 = Gray controllers.js:2708
new rating: 4 controllers.js:2712同样，它只是无法工作，无法更改颜色，如果以前的评论/数据是从服务器加载的，如果不存在，它仍然可以正常工作，甚至保存评论，让modal...and稍后返回以更改评论-它仍然有效。只有当用户刷新数据或从服务器获取新数据，并且审阅已经存在时，才会出现这种情况。
回答 1
Stack Overflow用户
发布于 2021-07-13 07:14:08
问题是在设置样式属性(star.style.color = 'lightgray !important';)时不能添加!important。
理想情况下，您应该给它一个类，并赋予类样式声明更高的特异性，这样它就可以覆盖没有!important的.reviewColor。
另一种选择是删除内联!important，因为它被认为是不好的做法，只需设置没有它的样式(只要您在另一个样式规则中没有!important，因为内联样式具有更高的优先级)。
如果您确实需要在内联样式中设置!important，您可以使用element.style.setProperty并在第三个参数中设置priority：
star.style.setProperty('color', 'lightgray', 'important');https://stackoverflow.com/questions/68348520
复制
腾讯云开发者
