Applying rating updates all ratings in the table (Angular 14, ngb-rating)-CodePudding

I have the following HTML table:

          <table >
                 ...
                <tr *ngFor="let tempOrderItem of orderItem">
                <td>
                    <a routerLink="/products/{{ tempOrderItem.productId }}">
                        <img src="{{ tempOrderItem.imageUrl }}"  style="width: 100%">
                    </a>
                </td>
                <td>
                    {{ tempOrderItem.unitPrice }} BYN
                </td>
                <td>
                    {{ tempOrderItem.quantity}} шт.
                </td>
                <td>
                    <ngb-rating [(rate)]="ratingValue"  [readonly]="false" [max]="5"
                        (rateChange)="onRateChange(tempOrderItem.productId)">
                    </ngb-rating>
                </td>

            </tr>
        </table>

When I add a vote for a row 1, I send an API call to the server and all works Ok here, other rows from BE side are not touched. But on UI, the mark I added to the first row, for example, is being added automatically to all other rows in the table. E.g. both items had 0, I voted for 3 for the first one and did not touch the second one - but the second one was update too. On UI only. How to fix it?

I did not find any extra info in the documentations regarding this rating module, so maybe here smb may help. Thanks!

CodePudding user response：

Your rating value is not read from your value from your ngfor tempOrderItem. You probably want to do something like

<ngb-rating [(rate)]="tempOrderItem.ratingValue"  [readonly]="false" [max]="5"
                        (rateChange)="onRateChange(tempOrderItem.productId)">
                    </ngb-rating>

Where your ratingvalue is for every line different and not just one value for the entire table