PrimeNg

Question

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

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

我想要实现的是，当您单击第一个选项 'Good:Stock' 时，会出现右侧带有 A1 的小下拉菜单。当你select'Bad'，它就消失了。现在的问题是，当我 select 'Good' 一个项目时，循环中的每条记录都会出现下拉列表。

我希望它只出现在我select编辑了单选按钮的项目中。

欢迎大家的帮助！询问您是否需要更多代码，但我认为 .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>

Answer 1

你的情况发生了什么假设让我们举个例子你有10行并且你为所有行维护一个变量那么当该标志的值从所有变为真或假时会发生什么drop-down行将显示或隐藏。

因此，集合中的建议为此 drop-down 列额外增加一个属性。

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

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

PrimeNg - Toggle div inline inside ng-template loop

html

angular