Как использовать несколько угловых компонентов в цикле

#angular #typescript

#угловой #typescript

Вопрос:

Я создаю всплывающую панель уведомлений, где я буду показывать все нерейтинговые поставки заказов на покупку. Я не уверен, как бы я использовал *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: Ниже приведен компонент

Кроме того, оценки, которые я передаю компоненту, являются данными для цикла оценки, обычно в качестве объекта передается 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>

Как вы можете видеть, я проделал все трюки, вставив уникальный идентификатор и т.д., но не повезло!

1. Вы используете Angular, А НЕ AngularJS

2. Мой плохой, но дело не в этом.

3. Если возможно, предоставьте stackblitz

4. Боюсь, я не смогу воспроизвести его, упростив. Могу ли я вам чем-нибудь еще помочь?

5. @Kirk нет необходимости в реальном коде, просто образец тестируемого кода

Ответ №1:

idk, если вам действительно нужно использовать ваш компонент, если нет, есть модуль из ng-bootstrap для оценки запуска, который действительно прост в использовании, и вы можете легко сохранить ваши ставки в массиве

1. Добро пожаловать в StackOverflow, кстати, полезно знать, компонент классный, но у меня нет времени переписывать всю систему заново и тестировать ее. Есть ли какой-либо обходной путь для моего дерьмового кода здесь?

Ответ №2:

[ratings]=»рейтинги», разве это не должно быть [ratings]=»task.ratings» . Поскольку он находится в цикле, я думаю, вам нужно присвоить значение рейтинга текущему повторяющемуся элементу. Вероятно, поэтому все значения меняются при изменении одного.

1. Извините за запутанный код, но это массив, отправляемый компоненту для зацикливания всех 5 запусков. внутри компонента я повторяю массив для рендеринга 5 запусков. Так вот почему рейтинги.

2. Вам все равно понадобится ссылка на «task» в «unratedOrders», чтобы обновить рейтинги для этой одной задачи. Попробуйте привязать рейтинг к задаче.

Ответ №3:

Теперь я не вижу, как вы обновляете значение ratings, но я вижу, что вы привязываетесь к ОДНОМУ и тому ЖЕ ratings в каждом <star-rating> элементе, поскольку вы используете пользовательскую директиву, я не могу угадать внутреннюю работу. Но мне это кажется подозрительным.

1. Извините за запутанный код, но это массив, отправляемый компоненту для зацикливания всех 5 запусков. внутри компонента я повторяю массив для рендеринга 5 запусков. Так вот почему рейтинги.

2. Смотрите ответ Абхая Навина. У меня такая же мысль

Ответ №4:

Это может быть проблема с вашим фактическим компонентом звездного рейтинга. Может быть, при добавлении рейтинга у них может не быть дифференциации типа идентификатора. Код поможет для точного анализа.

Ваш код должен быть таким, как показано ниже

 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
}

Ответ №5:

Ваш код должен быть таким, как показано ниже

 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
}