Блог

Главная - Вопросы по программированию - PrimeNG — переключение встроенного div внутри цикла ng-template

PrimeNG — переключение встроенного div внутри цикла ng-template

#html #angular #primeng

#HTML #угловой #primeng

Вопрос:

Я работаю с списком выбора PrimeNG, и вот что у меня есть:

введите описание изображения здесь

Основное внимание уделяется первой строке, не обращайте внимания на то, что в других строках нет переключателя (это незавершенные тестовые данные).

Чего я пытаюсь добиться, так это того, что когда вы нажимаете на первый вариант «Good: Stock», появляется небольшой выпадающий список справа с A1. Когда вы выбираете «Плохой», он исчезает. Проблема сейчас в том, что когда я выбираю «Хорошо» для одного элемента, выпадающий список будет отображаться для каждой записи в цикле.

Я хочу, чтобы он отображался только для элемента, в котором я выбрал radiobutton.

Любая помощь приветствуется! Спрашивайте, если вам нужно больше кода, но я не думаю, что файл .ts имеет значение на данный момент.

Вот как выглядит код:

 <label for="productGroup">Select product</label>
<div class="form-group" id="productGroup">
  <div class="row">
    <div class="col">
      <p-pickList [source]="products"
                  (onMoveToTarget)="onMoveToTarget()"
                  [target]="selectedProducts" sourceHeader="Available" targetHeader="Selected"
                  [responsive]="true" filterBy="description,productNumber"
                  dragdrop="true" dragdropScope="products" [showTargetControls]="false" [showSourceControls]="false"
                  sourceFilterPlaceholder="Search product in Available"
                  targetFilterPlaceholder="Search product in Selected"
                  [sourceStyle]="{'height':'33vh'}" [targetStyle]="{'height':'33vh'}">

        <ng-template let-product pTemplate="item">
          <div id="product" class="row ui-helper-clearfix">

            <div class="col-1 padding-0 brighten">
              <img (mouseover)="getProductImage(product)"
                   [escape]="false"
                   pTooltip='<img style="max-height: 100%; max-width: 100%" src="{{base64String}}">'
                   tooltipPosition="right"
                   src="assets/eye-icon.png" style="max-width: 100%; width: 80%;">
            </div>

            <div class="col-4">
              <div class="row">{{product.description}}</div>
              <br>
              <div class="row">{{product.productNumber}}</div>
            </div>

            <div class="col-4" *ngIf="inbound amp;amp; product.goodLabel amp;amp; product.badLabelInWarranty amp;amp;!hqAdminamp;amp;!carStock">
              <div class="row">
                <p-radioButton (onClick)="toggleProjects(true, product.id)" name="{{product.productNumber}}"
                               label="Good: {{product.goodLabel.name}}"
                               [value]="product.goodLabel" [(ngModel)]="product.quality">
                </p-radioButton>
                <p-radioButton name="{{product.productNumber}}"
                               label="Bad: {{product.badLabelInWarranty.name}}/{{product.badLabelOutOfWarranty.name}}"
                               [value]="product.badLabelInWarranty" [(ngModel)]="product.quality"
                               (onClick)="toggleProjects(false, product.id)">
                </p-radioButton>
              </div>
            </div>

            <div class="col-2 nopadding" *ngIf="goodSelected">
              <p-dropdown id="dropdownInput"
                          [autoWidth]="false"
                          [options]="projectLabelSelectItems">
              </p-dropdown>
            </div>

        </ng-template>
      </p-pickList>
    </div>
  </div>
</div>

Комментарии:

1. (onClick)=»Переключать проекты (false, product.id )» что такое код для этого, как вы обрабатываете этот код, поскольку я вижу, что эта переменная будет повторяться несколько раз, как это было в таблице и в цикле for.

2. Привет @ShivShankarNamdev , извините за поздний ответ. Метод выполняет следующее: toggleProjects(enable: boolean){ this.goodSelected = enable; } Появляется выпадающий список. Вы можете увидеть это для * ngIf=»goodSelected» для выпадающего div. Изначально я поместил product.id в методе тоже, но я не знаю, что с ним делать и как с ним обращаться.

Ответ №1:

Что происходит в вашем случае, предположим, давайте возьмем пример, у вас есть 10 строк, и вы поддерживаете одну единственную переменную для всей строки, поэтому, что произойдет, когда значение этого флага станет раскрывающимся списком true или false из всех строк, будет отображаться или скрываться.

Итак, что предлагается в коллекции, возьмите одно дополнительное свойство для этого выпадающего столбца.

        <div class="col-2 nopadding" *ngIf="goodSelected">
          <p-dropdown id="dropdownInput"
                      [autoWidth]="false"
                      [options]="projectLabelSelectItems">
          </p-dropdown>
        </div>

Здесь выбрана единственная переменная вместо добавления одной переменной в свойство

 <div class="col-2 nopadding" *ngIf="product.goodSelected">
          <p-dropdown id="dropdownInput"
                      [autoWidth]="false"
                      [options]="projectLabelSelectItems">
          </p-dropdown>
</div>

И при переключении сделайте выбранное значение true или false только для выбранной строки.