Angular4 星级评价功能定位基础问题

Question

现在的效果是点一下，五个实心全变成空心了，如何定位并返回定位的星数呢？
代码如下 ：

Template:

<a><i class="fa fa-star" *ngFor = "let star of stars" [class.fa-star-o]="starCtrl" (click)="clickStars(i)"></a>

// 注：class="fa fa-star" 实心星星
//class="fa fa-star-o" 空心星星

Ts:

private stars: any;
private starCtrl: boolean;
ngOnInit(): void {
  this.stars = [true,true,true,true,true]
}

clickStars(i: number){
  this.starCtrl = true;
}

Answer 1

template

<a><i class="fa fa-star" *ngFor = "let star of stars;let i = index" [class.fa-star-o]="star" (click)="clickStars(i)"></a>

ts

clickStars(i: number){
  this.stars = this.stars.map((_, n) => n <= i)
}