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...

一、效果圖

二、代碼

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;
    }
  }