我们常常看到一些商品有一些星级评价的样式 我们也同样来实现星级评价表的样式 当然采用的还是 boots里面的样式完成的。
主要涉及的问题 ：
1.如何显示星星 用boots 演示
2.如何显示空心的星星
3.如何显示五颗星星 想要显示五颗星星就需要在后台有 五颗 星星的一个数组
可以创建一个包含 五个boolean 类型的数组 public starts :boolean[];
4.如何让五颗星星有的空心有的实心 在这里会用到数据绑定的方式
数据绑定常见的方式 1.{{}} 2. 属性绑定 例如图片的 [src]=" 控制器属性名称"
我们在这里使用到了 属性绑定中的样式绑定 如下代码里面的【class.样式名称】
<span *ngFor="let star of starts;let i=index" class="glyphicon glyphicon-star"
[class.glyphicon-star-empty]="star" (click)="clickStar(i)">
</span>
- 因为我们的星级评价组件是包含在产品组件中的所以我们需要将产品组件中的数据传递给我们的星级评价组件中 这里我们就用到了输入输出属性 产品组件就属于 父组件 星级组件为子组件
我们分别看一下 父组件的 product.html
<app-stars [rating]="product.rating" ></app-stars>
接下来我们看一下 子组件的组件里面的代码 就是添加了一个
@Input("rating")
public rating :number;
6.如何根据商品的星级来确定星星是空心的还是实心的
需要我们在 子组件里面添加
this.starts=[];
for(let i=1;i<=5;i++){
this.starts.push(i>this.rating);
}
我们的星级评价组件就开发完毕了。
这个组件主要涉及三个知识点 1. ngFor 2.属性绑定 标签的属性和 后台的属性绑定 此处用到的是如何绑定样式 3.输入属性 如何将父组件的属性如何传给子组件 就是通过输入属性来完成的。
