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);
}
} }
Angular 星级评分组件的更多相关文章
- 干货之运用CALayer创建星级评分组件(五角星)
本篇记录星级评分组件的创建过程以及CALayer的运用. 为了实现一个星级评分的组件,使用了CALayer,涉及到mask.CGPathRef.UIBezierPath.动画和一个计算多角星关键节点的 ...
- vue星级评分组件
<template> <div class="Rating-gray"> <i v-for="(item,index) in itemCla ...
- js实现星级评分效果(非常规5个li代码)
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- 原生JS实现-星级评分系统
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...
- javascript星级评分(多个)
JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript星级评分
事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
随机推荐
- wcf读写cookie
一般来说,web应用的服务端(aspx或mvc的action)调用wcf时,是一个服务与服务的通讯,而不是客户端(浏览器)与服务器的通讯. 这种情况下,如果要在wcf端处理客户端的cookie,就需要 ...
- iOS调用系统页面中文显示
在开发的过程中,我们会接入很多的sdk,比如相机,相册,是否允许获取位置等,大多数的情况下是默认显示英文, 在plist文件里面添加一个key就可以了,如下图: key:Localization na ...
- input 控件监听回车确认按钮。
前端开发的同学捕捉回车按键经常会用到 if(event.keyCode == 13){ console.log("点击了回车按键");} 但是在微信上面,我们一般会用到指令 bin ...
- 基于JSP的RSS阅读器的设计与实现
阅读器访问地址:http://easyrss.tk/,欢迎体验! 阅读导览 一. 概述 二. 设计的基本概念和原理 三. 设计方案 四. 主要源代码 五. 阅读器使用说 ...
- Oracle扩容日志文件
0.检查当前数据库日志切换频率 select * from v$log_history where first_time>=to_date('2017-10-18','yyyy-mm-dd') ...
- replace的运用
replace() 方法用于在字符串中用一些字符替换另一些字符, 或替换一个与正则表达式匹配的子串. 语法: stringObject.replace(regexp / substr, replace ...
- 11招教你做好 ERP 系统维护
ERP 维护的具体工作内容主要包括以下几个方面: 例行和突发事件的处理 以管理和技术的手段,维护和发展 ERP 运行环境,如平衡技术先进性/实用风险.目标/成本而进行的IT基础结构(服务器.网络.PC ...
- MySQL语句应该注意的问题
刚刚开始写mysql语句 比较繁琐,乱哄哄的,总结了几点应该注意的事项: 1 注意标点符号,在创建表格 create table的时候 括号里面包含的内容用“,”号分割开,最后一条语句不要加标点符号 ...
- linux 网络命令ping、关闭防火墙、ifconfig、ip addr、setup、nmtui、write、wall、mail
ping /bin/ping语法:ping [选项] IP地址 选项:-c 指定发送次数功能描述:测试网络连通性 ping -c 4 192.168.1.101 关闭防火墙systemctl stop ...
- Eclipse 配置 maven 的两个 settings 文件
eclipse配置的settings文件名完全可以自定义,而本机maven只认识settings.xml文件. eclipse里配置maven有一个叫全局的,有一个叫用户的.这两个文件可以和本机mav ...