ionic2入门教程（七）来一个五星评分

系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构
ionic2入门教程（五）如何使用IonicPage
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

五星评分

0、参考资源

https://segmentfault.com/a/11...
http://www.w3school.com.cn/ta...
https://stackoverflow.com/que...

1、效果图

2、代码

html

  <ion-card>
    <ion-card-title padding>请您对我们的服务评分：</ion-card-title>
    <div class="star-div" (click)="chooseStar($event)">
      <div *ngFor="let scoreMap of score.starMap; let indx = index">
        <ion-icon name="star" color="chrome3" *ngIf="score.star>=indx+1;" style="padding-right: .5em" [attr.data-index]="indx+1"></ion-icon>
        <ion-icon name="star-outline" color="chrome3" *ngIf="score.star<indx+1;" style="padding-right: .5em" [attr.data-index]="indx+1"></ion-icon>
      </div>
      <span>{{score.starMap[score.star-1]}}</span>
    </div>
  </ion-card>

ts

  score: any = {
    star: 0,
    starMap: [
      '不满意',
      '还行',
      '一般',
      '满意',
      '很满意',
    ]
  }
chooseStar(e){
    let star = parseInt(e.target.dataset.index);
    this.score.star = star;
    // console.log(e.target.dataset.index);
    // console.log(this.score.star);
    // console.log(star);
  }

css

  .star-div {
    width: 80%;
    height: 40px;
    padding-left: 20px;
    span{
        color:#e5574f;
        float: left;
        font-size:20px;
    }
    ion-icon {
      float: left;
      font-size: 28px;
    }
  }