如何在 angular 的目标组件中使选择列表可编辑？

Question

我正在使用 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>

Answer 1

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

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

StackBlitz

如何在 angular 的目标组件中使选择列表可编辑？

How to make picklist editable in the target component in angular?

html

picklist

primeng

angular