Question

我正在创建一个弹出通知面板，其中将显示所有未评级的采购订单交货。我不确定如何使用* ngFor进行循环。

我有一个系统，用户可以在该系统上对他们的订单交付进行星级评分。每个订单都有其评分页面，可以在其中对订单进行评分。这是使用自定义组件（星级评分组件）完成的。

问题是，当在页面中使用它时，它工作得很好，但是现在我还需要通过通知面板提醒用户未定单，例如“请立即对其定级”。这是使用具有重复评分成分的模态完成的。

现在，当我循环所有未评级的订单时，它会按预期显示，但是，当我对一个订单进行评级时，所有其他订单也会更改其评级。我该如何克服？

<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：以下是组件

此外，我将其传递给组件的 ratings 是评分循环的数据，通常会将5个评分作为一个对象传递。然后在组件中渲染5个开始。

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

如您所见，我已经完成了插入唯一ID等所有技巧，但是没有运气！

Answer 1

如果您确实需要使用您的组件，则为idk，如果没有，则使用ng-bootstrap中的一个模块来进行启动评级，它非常简单here，并且您可以轻松地将利率存储在数组中

Answer 2

[ratings] =“ ratings”，不应该是[ratings] =“ task.ratings”。由于它处于循环中，我想您需要将等级的值分配给当前的迭代元素。可能是为什么更改一个后所有值都在变化。

Answer 3

您实际的星级评分组件可能有问题。可能是在添加评分时，他们可能没有任何ID类型差异。代码将有助于进行准确的分析。

您的代码应如下所示

unratedOrders - [{
orderId:1234
ratings:[{},{}]
}]


<div class="star-rating-size">
    <star-rating #starRating id="{{task.orderId}}-rating-component" (ratingChange)="changeRating($event,task)" [controlIndex]="i" [ratings]="task.ratings" [(rating)]="supplierRating.ratingId"></star-rating>
</div>

changeRating(event, selectedTask) {
    loop through unratedOrders and assing value to selected task
}

Answer 4

现在我看不到如何更新您的评级值，但是我看到您绑定到每个ratings元素中的SAME <star-rating>，因为您使用自定义指令，所以我无法猜测内部工作。但这对我来说可疑。

Answer 5

您实际的星级评分组件可能有问题。可能是在添加评分时，他们可能没有任何ID类型差异。代码将有助于进行准确的分析。

您的代码应如下所示

unratedOrders - [{
orderId:1234
ratings:[{},{}]
}]


<div class="star-rating-size">
    <star-rating [ratings]="task.ratings" (ratingChange)="changeRating($event,task)"  id="{{task.orderId}}-rating-component"  [controlIndex]="i"  [(rating)]="supplierRating.ratingId"></star-rating>
</div>

changeRating(event, selectedTask) {
    loop through unratedOrders and assing value to selected task
}

如何在循环中使用多个Angular组件

5 个答案: