一、需求演變及描述：

1. 有一個(gè)“客戶對(duì)公司的總體評(píng)價(jià)”的字段（evalutation）。字段為枚舉類型，0-5，對(duì)應(yīng)關(guān)系為：0-暫無(wú)評(píng)價(jià)，1-很差，2-差，3-一般，4-好，5-很好

2. 后來(lái)需要根據(jù)評(píng)分使用星星來(lái)表現(xiàn)，一共5顆星，分為實(shí)星和空星，例如，當(dāng)3分時(shí)，三顆星星被點(diǎn)亮，即3顆實(shí)星2顆空星。

二、開發(fā)前準(zhǔn)備：

1. 用于描述星星的圖標(biāo)，也可以是圖片，我這里使用 iconfont

?

2. 新建一個(gè)星級(jí)評(píng)分組件，便于復(fù)用

通過(guò)命令 ng g component rating 我新建了一個(gè)星級(jí)評(píng)分組件

三、從父組件中獲取“客戶對(duì)公司的總體評(píng)價(jià)”的字段的值

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

<li class="companyevalutation">客戶對(duì)公司的總體評(píng)價(jià)：<app-rating [starsRating]="repairs.evalutation"></app-rating> </li>

說(shuō)明：app-rating 是新建的星級(jí)評(píng)分組件，使用 starsRating 屬性綁定?evalutation 的值

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

@Input()private starsRating: number = 0;

說(shuō)明：@input 用來(lái)定義模塊的輸入，用于從父組件向子組件傳遞數(shù)據(jù)

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

三、顯示實(shí)星和空星

1. 顯示5顆實(shí)星

要顯示5顆實(shí)星可以這樣做：

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

但是這樣的做法未免太過(guò)暴力，假如要顯示100顆星，豈不是要寫100行同樣的代碼。

顯示5顆實(shí)星，可以使用 angular 的循環(huán)

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

同時(shí)在控制器里面，定義 stars 的值：

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

這樣就得到了5顆實(shí)心的星星。

star 的值為 true 時(shí)，添加?icon-start_n 類，顯示空星。

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

獲取實(shí)際的星星個(gè)數(shù)：

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

stars 為布爾型的數(shù)組，值為 false 將會(huì)顯示實(shí)星，值為 true 將會(huì)顯示空星。

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

四、源碼：

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/xinjie-just/p/8854795.html

總結(jié)

以上是生活随笔為你收集整理的Angular 星级评分组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。