ngFor中的动态CSS类

Question

嗨，我正在研究纯粹的CSS星级，但我在css课上遇到了困难。当我在另一个评级星上徘徊时，第一个或前5星评级正在徘徊。

就像在这张照片中我试图对第二个问题进行评分，但第一个问题中的前五颗星也在徘徊。这是我的代码

<ng-container *ngFor="let x of evaluation_form; let i = index">
  <div class="row">
    <div class="col-md-4">
      <p style="font-size: 16pt">Name:<strong style="font-size: 16pt"> {{x.emp_name}}</strong></p>
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <p style="font-size: 16pt">Position:<strong style="font-size: 16pt">{{x.position}}</strong></p>
    </div>
  </div>
  <div class="row" *ngFor="let y of x.segments; let j = index" [@hideShowAnimator]="i == hideShowAnimator">
    <div class="col-md-6 col-md-offset-5" style="font-size: 35pt; color: #3c8dbc;">{{ y.segment_name }}</div>
    <div *ngFor="let z of y.question_collection ; let o = index">
      <br>
      <div class="row">
        <div class="col-md-11">
          <strong style="font-size: 16pt">{{ z.question }}</strong>
        </div>
      </div>
      <div>
        <div class="row">
          <div class="col-md-11">
            <fieldset class="rating">
              <input type="radio" id="star5" name="{{y.segment_name}}x{{z.q_id}}" value="5" (change)="changeRatingValue(i,j,o,5)" /><label for="star5"></label>
              <input type="radio" id="star4" name="{{y.segment_name}}x{{z.q_id}}" value="4" (change)="changeRatingValue(i,j,o,4)" /><label for="star4"></label>
              <input type="radio" id="star3" name="{{y.segment_name}}x{{z.q_id}}" value="3" (change)="changeRatingValue(i,j,o,3)" /><label for="star3"></label>
              <input type="radio" id="star2" name="{{y.segment_name}}x{{z.q_id}}" value="2" (change)="changeRatingValue(i,j,o,2)" /><label for="star2"></label>
              <input type="radio" id="star1" name="{{y.segment_name}}x{{z.q_id}}" value="1" (change)="changeRatingValue(i,j,o,1)" /><label for="star1"></label>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row" (click)="hideShowAnimation(i)">
    <button class="button"><span>Next </span></button>
  </div>
</ng-container>

这是我的单选按钮样式

.rating {
  float: left;
}

.rating:not(:checked)>input {
  position: absolute;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}

.rating:not(:checked)>label {
  float: right;
  width: 1em;
  padding: 0 .1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 302%;
  line-height: 1.2;
  color: #ddd;
  text-shadow: 1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, .5);
}

.rating:not(:checked)>label:before {
  content: '★ ';
}

.rating>input:checked~label {
  color: #f70;
  text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, .5);
}

.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
  color: gold;
  text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}

我只想在每个问题中使我的5评级动态。我只是想知道如何在Angular 2中做到这一点。提前感谢您的帮助

Answer 1

除非您出于某种原因从头开始实施，否则为什么不考虑一个灵活且可配置的现有解决方案？

看看这个插件

https://www.npmjs.com/package/angular-star-rating

Answer 2

修改

我对错误提供的angularJS答案深表歉意。这是Angular版本。

TLDR;为该类添加一个关于悬停事件和样式的类。

HTML

<fieldset class="rating">
    <input type="radio" (mouseover)="z.active=true" (mouseout)="z.active=false" id="star5" name="{{y.segment_name}}x{{z.q_id}}" value="5" (change)="changeRatingValue(i,j,o,5)" />
    <label [ngClass]="{'active': z.active}" for="star5"></label>
...
</fieldset>

CSS

.rating:not(:checked)>label.active:hover,
.rating:not(:checked)>label.active:hover~label {
    color: gold;
    text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}

<强> AngularJS

尝试在active上设置ng-mouseover课程并为其设置样式。

HTML

<fieldset class="rating">
    <input type="radio" ng-mouseover="z.active=true" ng-mouseleave="z.active=false" id="star5" name="{{y.segment_name}}x{{z.q_id}}" value="5" (change)="changeRatingValue(i,j,o,5)" />
    <label ng-class="{active: z.active}" for="star5"></label>
...
</fieldset>

CSS

.rating:not(:checked)>label.active:hover,
.rating:not(:checked)>label.active:hover~label {
    color: gold;
    text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}