如何用Angluar4实现星级评分

开门见山，直入主题。

效果如图

至于Angluar程序架构和搭建环境，这里不多说

要实现星级评分需要解决6个问题

项目结构部分截图，星级评分主要讲的是products和stars

就是效果图的这部分区域

1、如何在页面实现一个星，在stars.components.html里面用bootstrap的样式<span class="glyphicon glyphicon-star"></span>,前提你的angular项目必须要安装bootstrap，要经过3步

2、如何实现一个空的星<span class="glyphicon glyphicon-star-empty"></span>

3、如何显示5颗星星。在stars.components.ts里面定义一个数组。

private starts：boolean[ ];

ngOnInit() {  //一个钩子函数

this.stars= [true,true,false,false,true];

}，然后在span里面用*ngFor=“let star of stars ”（这点跟vue好像，其实有很多地方都很相像）

4、如何实现有的是实星，有的是空星。先介绍几种绑定值的方式

a.{{}} 学过vue的人对这种绑定值的方式应该不陌生b.属性绑定，比如

这是在product.component.html 里面的写法
这是在product.component.ts里面的写法

这就是属性绑定（不也跟vue很像吗）

c.样式绑定（就是用样式绑定来实现5颗星有的是空星有的是实星）<span*ngFor="let star of stars" class="glyphicon glyphicon-star"[class.glyphicon-star-empty]="star">这句话的意思就是如果star是true显示实星，如果是false就显示空星

5、如何将商品的评级传给星级评价（父组件传值给子组件）

1）首先在星级评价star.component.ts的组件里面声明一个rating属性（private rating:number=0），用来接受父组件传给子组件的值，即productc->star

2）怎么在star.component.html上面显示{{rating}}星

现在肯定是0，因为product组件还没有传值，现在只是star组件做了接受和显示的操作

3）在star.component.ts里面定义一个@Input的装饰器

4）在父组件里面传值

6、如何将商品的星级来决定是实心还是空心的，之前是this.stars数组是写死的

1）先将stars.component.ts的this.stars置空

2）动态传值

星级评分到此结束！