Angular 星級評分組件

一、需求演變及描述：

1. 有一個“客戶對公司的總體評價”的字段（evalutation）。字段為枚舉類型，0-5，對應關系為：0-暫無評價，1-很差，2-差，3-一般，4-好，5-很好

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

二、開發前准備：

1. 用於描述星星的圖標，也可以是圖片，我這里使用 iconfont

 

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

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

三、從父組件中獲取“客戶對公司的總體評價”的字段的值

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

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

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

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

@Input()
  private starsRating: number = 0;

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

在這里可以將 starsRating 的值傳遞出去。

三、顯示實星和空星

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]; 視圖顯示三顆實星，兩顆空星

四、源碼：

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

}