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

问题描述

我正在与 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>

解决方法

假设您发生了什么情况，举个例子，您有10行，并且为所有行维护一个变量，那么当该标志的值变为true或false时，将显示所有行的情况。或隐藏。

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

       <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选定值为true或false。

angular html primeng