I am currently working on a pop-up notification system for displaying all unrated purchase order deliveries. However, I am facing a challenge in implementing *ngFor loop to iterate through the orders.
My system allows users to rate their item order deliveries by accessing a rating page for each order. This process involves using a custom Star Rating Component.
The issue arises when I try to remind users about pending ratings through a notification panel. The panel uses a modal with repeated rating components to prompt users to rate their orders immediately.
While looping through all the unrated orders, I encounter a problem where changing the rating of one order affects the ratings of all other orders. How can I resolve this issue?
<ng-container *ngFor="let task of unratedOrders; let i = index">
<div class="col-md-3">
<div class="card">
<div class="card-body r-wrapper__body">
<div>
<div class="avatarx">
</div>
<div class="header">
<h3 class="card-title">Rate task {{task.orderId}}</h3>
</div>
</div>
<div class="star-rating-size">
<!-- The rating component is here -->
<star-rating id="{{task.orderId}}-rating-component" (ratingChange)="changeRating($event)" [controlIndex]="i" [ratings]="ratings" [(rating)]="supplierRating.ratingId"></star-rating>
</div>
<div class="r-info">
<div class="r-info__icon">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<p>
<span *ngIf="selectedRating"><b>{{selectedRating?.ratingHeader}}</b> - {{selectedRating?.ratingDesc}}</span>
</p>
</div>
<textarea class="r-comment" name="" placeholder="Write a short comment.." id="" cols="30" rows="2" [(ngModel)]="supplierRating.description"></textarea>
<button type="button" class="btn btn-sm" (click)="changeETA(task)">Change ETA</button>
<button type="button" class="btn btn-primary btn-sm" (click)="submitRating($event)">Submit rating</button>
</div>
</div>
</div>
</ng-container>
PS: Following is the component
Moreover, the ratings that I pass to the component represent the data for the rating loop, typically consisting of 5 rating options passed as an object. This data is used to render 5 stars in the component.
<fieldset class="rate" id="rate-{{controlIndex}}" [class.readonly]="readonly">
<ng-container *ngFor="let star of ratings; let i = index">
<input type="radio" id="rating-{{ratings.length-i-1}}-{{controlIndex}}" name="rating-{{controlIndex}}" [checked]="(star.id == rating)" />
<label [class.half]="(i%2)==1" for="rating-{{ratings.length-i-1}}-{{controlIndex}}" (click)="updateRating(star.id)"></label>
</ng-container>
</fieldset>
https://i.sstatic.net/DmBmR.png
Despite implementing various techniques like inserting unique IDs, the issue still persists!