在Angular 4中自动填充评级系统中的前一个星标

Question

我正在努力制作星级评分系统，如果我点击任何一颗星，那么所有以前的恒星以及那颗恒星都应该改变它们的颜色。

我的app.component.html

  <div class="row">
    <app-rating [status]="rating >= 1" (click)="setValue(1)"></app-rating>
    <app-rating [status]="rating >= 2" (click)="setValue(2)"></app-rating>
    <app-rating [status]="rating >= 3" (click)="setValue(3)"></app-rating>
    <app-rating [status]="rating >= 4" (click)="setValue(4)"></app-rating>
    <app-rating [status]="rating >= 5" (click)="setValue(5)"></app-rating>
  </div>

，我的app.component.ts

export class AppComponent {
  rating = 0;

  setValue(n: number) {
    this.rating = n;
  }
}

我的rating-component.ts

export class RatingComponent {
  imgPath = 'some-url';
  filledPath = 'some-url';
  @Input() status: string;
  changeColor() {
    if (this.status) {
      console.log('this');
      this.imgPath = this.filledPath;
    }
  }
}

和我的rating-component.html文件是

<img [src]="imgPath"  width="50px" height="50px" (click)="changeColor()">

但它无法正常工作。 当我点击任何一颗星时，我必须点击两次，之前的星也没有改变它们的颜色。