如何使选项列表在目标组件中以角度可编辑？答案

【问题标题】：How to make picklist editable in the target component in angular?如何使选项列表在目标组件中以角度可编辑？
【发布时间】：2022-01-26 05:07:49
【问题描述】：

我正在使用p-picklist，我想编辑用于显示值的目标列表跨度数据。

我使用的是源码：https://primefaces.org/primeng/showcase/#/picklist

如何使目标列表中的产品名称可编辑。

<p-pickList
  [source]="sourceProducts"
  [target]="targetProducts"
  sourceHeader="Available"
  targetHeader="Selected"
  [dragdrop]="true"
  [responsive]="true"
  [sourceStyle]="{'height':'30rem'}"
  [targetStyle]="{'height':'30rem'}"
  filterBy="name"
  sourceFilterPlaceholder="Search by name"
  targetFilterPlaceholder="Search by name"
>
  <ng-template let-product pTemplate="item">
    <div class="product-item">
      <div class="image-container">
        <img
          src="assets/showcase/images/demo/product/{{product.image}}"
          [alt]="product.name"
          class="product-image"
        />
      </div>
      <div class="product-list-detail">
        <h5 class="p-mb-2">{{product.name}}</h5>
        <i class="pi pi-tag product-category-icon"></i>
        <span class="product-category">{{product.category}}</span>
      </div>
      <div class="product-list-action">
        <h6 class="p-mb-2">${{product.price}}</h6>
        <span
          [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()"
          >{{product.inventoryStatus}}</span
        >
      </div>
    </div>
  </ng-template>
</p-pickList>

【问题讨论】：

标签： html angular primeng picklist

【解决方案1】：

将<h5 class="p-mb-2">{{product.name}}</h5> 转换为[(ngModel)]="product.name" 的输入似乎可行。

为了检查模板项是否列在target 下而不是source 下，您可以检查元素在DOM 上的位置；如果在.p-picklist-target 内，则显示input，否则显示h5。

StackBlitz

【讨论】：