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