Home > Software design >  Applying rating updates all ratings in the table (Angular 14, ngb-rating)
Applying rating updates all ratings in the table (Angular 14, ngb-rating)

Time:01-31

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?

enter image description here

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

  • Related