iis 网站文件被占用,店面设计费一般多少钱一平,装修公司网站asp源码,现代示范校建设专题网站一、需求演变及描述#xff1a; 1. 有一个“客户对公司的总体评价”的字段#xff08;evalutation#xff09;。字段为枚举类型#xff0c;0-5#xff0c;对应关系为#xff1a;0-暂无评价#xff0c;1-很差#xff0c;2-差#xff0c;3-一般#xff0c;4-好#xf…一、需求演变及描述 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 classcompanyevalutation客户对公司的总体评价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 classiconfont icon-start_c/span
span classiconfont icon-start_c/span
span classiconfont icon-start_c/span
span classiconfont icon-start_c/span
span classiconfont icon-start_c/span 但是这样的做法未免太过暴力假如要显示100颗星岂不是要写100行同样的代码。 显示5颗实星可以使用 angular 的循环 span *ngForlet star of stars; classiconfont icon-start_c/span 同时在控制器里面定义 stars 的值 stars: boolean[];constructor() { }ngOnInit() {this.stars [true, true, true, true, true];
} 这样就得到了5颗实心的星星。 star 的值为 true 时添加 icon-start_n 类显示空星。 span *ngForlet star of stars; classrating 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 的值为 3stars [false, false, false, true, true]; 视图显示三颗实星两颗空星 四、源码 rating.component.html span *ngForlet star of stars; classrating 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);}}} 转载于:https://www.cnblogs.com/xinjie-just/p/8854795.html
