angular4小星星评分功能代码

好像好久没记录学到的新知识了，一开始呢没有活做，一直闲着，后来呢，有活了，但是很突然，导致没有时间写，哈哈哈。总在极与极之间转换，难免觉得生活枯燥工作压力大，可能这才是正常的工作状态吧，要慢慢调整自己。不知道有几个人能看到我的博客，但是如果有幸被人看到了，觉得也很赚到，毕竟送了碗鸡汤，哈哈哈。

估计接下来我会写几篇博客来记录项目中遇到的一些小小的我第一次见到的功能，这个是评分的小星星功能。长这样

html：

 <div class="form-item">
        <span >评分</span>
        <label class="item item-input">
          <p class="stars-wrapper">
            <span class="stars" *ngFor="let i of [1, 2, 3, 4, 5]"
                  [ngClass]="{active: stars > i - 1}"      
                   (click)="clickStars(i)
             </span>
           </p>
        </label>
</div>

less：

.stars-wrapper {
  margin: 0;
  position: absolute;
  right: 0.75rem;
  top: 0.35rem;
}

.stars {
  display: inline-block;
  background: url(灰色小星星地址) no-repeat;
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}

.active {
  background-image: url(黄色小星星地址);
}

ts：

  clickStars(i: number) {
    this.stars = i;
  };

其他就很简单啦，我想记录单只有一个知识点，ngClass是如何点了第三个只传了第三个的值，但是前三个的span都绑定了active的

是因为循环的12345是位数，他们分别对应的索引是01234，传得是位置，比较的是索引，如果点击第三位，i=3, {active: 3> 3 - 1} 小于3的都显示。