单击 Angular 中的组件，不仅一次选择整个 arrays

Question

I am implementing a rating component in Angular, which I'll use in another component to rate the language. Rate I mean how good is with it.

My problem it is that when I do hear a click event for one array, automatically will select the second array and give them both or will fill both of them with color. It is possible to click only one event and give it data. The code for star component I am based in this stackblitz.

https://stackblitz.com/edit/angular-material-star-rating-kptyy2?file=app%2Fapp%2Fapp.component.html
Here is my star component.

<button mat-icon-button *ngFor="let ratingId of ratingArr;index as i" [id]="'star_'+i" (click)="onClick(i+1)"
        >
  <mat-icon>
    {{showIcon(i)}}
  </mat-icon>
</button>
<mat-error *ngIf="starCount == null || starCount == 0">
</mat-error>

export class StarRatingComponent implements OnInit {
  @Input("rating") private rating = 3;
  @Input("starCount") public starCount = 5;
  @Output() private ratingUpdated = new EventEmitter();

  public ratingArr = [];

  constructor() {

  }

  ngOnInit() {
    for (let index = 0; index < this.starCount; index++) {
      this.ratingArr.push(index);
    }
  }
  onClick(rating: number) {
    this.ratingUpdated.emit(rating);
    return false;
  }

  showIcon(index: number) {
    if (this.rating >= index + 1) {
      return "star";
    } else {
      return "star_border";
    }
  }
}

And this is the component which I try to show it and fill with data.

<div *ngFor="let language of subCategory.languages; let i = index">
        <div class="col-md-8">
         {{language.name}}
         <app-star-rating [rating]="language.rate" [starCount]="starCount" (ratingUpdated)="onRatingChanged($event)"></app-star-rating>
        </div>
      </div>

  onRatingChanged(rating) {
    this.skills.subCategories.map(test => test.languages.filter(res => {
      console.log(res.name);
      res.rate = rating;
    }));
  }

Answer 1

You can pass the index from the HTML in the onRatingChanged function along with event as below:

 <div *ngFor="let language of languages; let i = index">
      <div class="col-md-8">
         {{language.name}}
         <mat-star-rating [rating]="language.rate" [color]="starColor" (ratingUpdated)="onRatingChanged($event,i)"></mat-star-rating>
      </div>
 </div>