开门见山，直入主题。
效果如图
至于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）动态传值
星级评分到此结束！
网友评论