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

?