Angular 星級評分組件

1、需求演變及描述：

1. 有一個「客戶對公司的整體評價」的字段（evalutation）。字段爲枚舉類型，0-5，對應關係爲：0-暫無評價，1-不好，2-差，3-通常，4-好，5-很好

2. 後來須要根據評分使用星星來表現，一共5顆星，分爲實星和空星，例如，當3分時，三顆星星被點亮，即3顆實星2顆空星。

2、開發前準備：

1. 用於描述星星的圖標，也能夠是圖片，我這裏使用 iconfont

 

2. 新建一個星級評分組件，便於複用

經過命令 ng g component rating 我新建了一個星級評分組件

3、從父組件中獲取「客戶對公司的整體評價」的字段的值

一般控制星星顯示的 evalutation 值都是一個從父組件傳遞出去的Number類型值。 
一、首先咱們須要在調用星級組件的父組件模板中將值傳遞出去：

<li class="companyevalutation">客戶對公司的整體評價：
  <app-rating [starsRating]="repairs.evalutation"></app-rating>
</li>

說明：app-rating 是新建的星級評分組件，使用 starsRating 屬性綁定 evalutation 的值

二、星級組件爲了得到這個值，須要使用輸入屬性 @Input() 
在星星組件的控制器（rating.component.ts)中寫這樣一段代碼

@Input()
  private starsRating: number = 0;

說明：@input 用來定義模塊的輸入，用於從父組件向子組件傳遞數據

在這裏能夠將 starsRating 的值傳遞出去。

3、顯示實星和空星

1. 顯示5顆實星

要顯示5顆實星能夠這樣作：

<span class="iconfont icon-start_c"></span>
<span class="iconfont icon-start_c"></span>
<span class="iconfont icon-start_c"></span>
<span class="iconfont icon-start_c"></span>
<span class="iconfont icon-start_c"></span>

可是這樣的作法未免太過暴力，假如要顯示100顆星，豈不是要寫100行一樣的代碼。

顯示5顆實星，可使用 angular 的循環

<span *ngFor="let star of stars;" class="iconfont icon-start_c"></span>

同時在控制器裏面，定義 stars 的值：

stars: boolean[];

constructor() { }

ngOnInit() {
   this.stars = [true, true, true, true, true];
}

這樣就獲得了5顆實心的星星。

star 的值爲 true 時，添加 icon-start_n 類，顯示空星。

<span *ngFor="let star of stars;" class="rating iconfont icon-start_c" [class.icon-start_n]="star"></span>

獲取實際的星星個數：

get starsRating(): number {
    return this._starsRating;
}

@Input() set starsRating(value: number){
    this._starsRating = value;
    this.rating();
}

stars 爲布爾型的數組，值爲 false 將會顯示實星，值爲 true 將會顯示空星。

public rating(): void {
  this.stars = [];
  for (let i = 1; i <= 5; i++){
    this.stars.push(i > this.starsRating);
  }
}

若是 starRating 的值爲 3，stars = [false, false, false, true, true]; 視圖顯示三顆實星，兩顆空星

4、源碼：

rating.component.html：

<span *ngFor="let star of stars;" class="rating iconfont icon-start_c" [class.icon-start_n]="star"></span>

rating.component.ts：

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html'
})
export class RatingComponent implements OnInit {

  public _starsRating: number = 0;
  public stars: boolean[];

  get starsRating(): number {
    return this._starsRating;
  }

  @Input() set starsRating(value: number){
    this._starsRating = value;
    this.rating();
  }

  constructor() { }

  ngOnInit() {
    this.rating();
  }

  public rating(): void {
    this.stars = [];
    for (let i = 1; i <= 5; i++){
      this.stars.push(i > this.starsRating);
    }
  }

}