Angular中p-picklist指定动作及精准触发移动事件的问题

嘿，我来帮你搞定这两个关于PrimeNG p-picklist的问题～

PrimeNG的p-picklist提供了一系列专门针对列表项移动的事件，能精准捕获不同操作场景：

• onMoveToTarget: 单个/多个项从源列表（Available）移动到目标列表（Selected）时触发
• onMoveToSource: 单个/多个项从目标列表移回源列表时触发
• onMoveAllToTarget: 点击"全部右移"按钮，所有源列表项移动到目标列表时触发
• onMoveAllToSource: 点击"全部左移"按钮，所有目标列表项移回源列表时触发
• onSelectionChange: 列表中选中的项发生变化时触发
• onDrop: 开启拖拽功能后，完成拖拽操作（无论方向）时触发

你之前用(click)="refresh()"会在点击组件任意区域（比如表头、空白处）都触发，这显然不是你要的效果。其实p-picklist专门提供了左到右移动的专属事件onMoveToTarget，直接用它替代click就可以了：

修改后的代码片段：

<p-pickList 
  (onMoveToTarget)="refresh()" 
  [source]="available" 
  [target]="selected" 
  sourceHeader="Available" 
  targetHeader="Selected" 
  [responsive]="true" 
  filterBy="type" 
  dragdrop="true"
  <!-- 你的其他属性继续保留 -->
></p-pickList>

如果你还需要处理**批量右移（点击全部右移按钮）**的场景，只需要再加上onMoveAllToTarget事件即可：

<p-pickList 
  (onMoveToTarget)="refresh()" 
  (onMoveAllToTarget)="refresh()"
  [source]="available" 
  [target]="selected" 
  sourceHeader="Available" 
  targetHeader="Selected" 
  [responsive]="true" 
  filterBy="type" 
  dragdrop="true"
></p-pickList>

这样调整后，只有当项从左列表移动到右列表（不管是单个选择右移还是全部右移）时，才会调用refresh()方法，完美符合你的需求～

内容的提问来源于stack exchange，提问作者Bill Newton