PrimeNg - 在 ng-template 循环内切换 div 内联答案

【问题标题】：PrimeNg - Toggle div inline inside ng-template loopPrimeNg - 在 ng-template 循环内切换 div 内联
【发布时间】：2020-08-27 13:23:48
【问题描述】：

我正在使用 PrimeNg 选择列表，这就是我所拥有的：

重点在第一行，不要介意其他行没有单选按钮（它是未完成的测试数据）。

我想要实现的是，当您单击第一个选项“Good:Stock”时，会出现右侧带有 A1 的小下拉菜单。当您选择“坏”时，它会消失。现在的问题是，当我为一项选择“好”时，循环中的每条记录都会出现下拉列表。

我希望它只出现在我选择单选按钮的项目中。

欢迎所有帮助！询问您是否需要更多代码，但我认为 .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 && product.goodLabel && product.badLabelInWarranty &&!hqAdmin&&!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>

【问题讨论】：

(onClick)="toggleProjects(false, product.id)" what is code for this 你如何处理这个代码，因为我可以看到这个变量将重复多次，因为它在表和for 循环。
嗨 @ShivShankarNamdev ，很抱歉回答迟了。该方法执行以下操作： toggleProjects(enable: boolean){ this.goodSelected = enable;它使下拉列表出现。您可以在下拉 div 的 *ngIf="goodSelected" 中看到它。我最初也将 product.id 放入方法中，但我不知道如何处理它以及如何处理它。

标签： html angular primeng

【解决方案1】：

在您的情况下发生的情况假设让我们举个例子，您有 10 行，并且您为所有行维护一个变量，因此当该标志的值变为真或假时，所有行的下拉菜单将显示或隐藏。

因此，集合中的建议为该下拉列额外增加一个属性。

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

这里的 goodSelected 是在属性中添加一个变量的单个变量

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

并且在切换时，仅将所选行的 goodSelected 选定值设为真或假。

【讨论】：