步骤1:star.html
<p>
<span *ngFor="let star of stars" class="fa fa-star" [class.fa-star-o]="star"></span>
<span>{{rating}}星</span>
</p>
步骤2:星星组件
export class StarsComponent implements OnInit {
@Input()
private rating:number= 0;//接收父组件传过来的等级
constructor() { }
private stars: Boolean[];
ngOnInit() {
this.stars=[];
for(let i =1;i<=5; i++){
this.stars.push(i>this.rating); //push数组的末尾添加新的元素
}
}
}
步骤3:父组件模板 属性绑定
<app-stars [rating]="product.rating"></app-stars>
网友评论