單擊 Angular 中的組件，不僅一次選擇整個 arrays

Question

我在 Angular 中實現了一個評級組件，我將在另一個組件中使用它來對語言進行評級。 評價我的意思是它有多好。

我的問題是，當我確實聽到一個數組的點擊事件時，會自動將 select 第二個數組並給它們兩個，或者用顏色填充它們兩個。 可以只單擊一個事件並為其提供數據。 我在這個 stackblitz 中基於的明星組件的代碼。

https://stackblitz.com/edit/angular-material-star-rating-kptyy2?file=app%2Fapp%2Fapp.component.html
這是我的star組件。

<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";
    }
  }
}

這是我嘗試顯示並填充數據的組件。

<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

您可以在onRatingChanged function 中傳遞來自 HTML 的索引以及如下事件：

 <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>