如何实现可切换为下拉列表的可编辑PrimeNG Chips组件？

实现思路 #

通过给每个Chip项维护isEditing状态，控制其显示形态：默认展示文本，点击后切换为下拉选框，选择选项后更新文本并切回默认状态。

代码实现 #

1. 组件模板（HTML） #

<p-chips [(ngModel)]="values" [readonly]="true">
  <ng-template let-item pTemplate="item">
    <!-- 非编辑状态：展示Chip文本，点击触发编辑 -->
    <span *ngIf="!item.isEditing" (click)="startEditing(item)">{{item.value}}</span>
    
    <!-- 编辑状态：展示下拉选框 -->
    <p-dropdown 
      *ngIf="item.isEditing" 
      [(ngModel)]="item.value" 
      [options]="cities" 
      optionLabel="name"
      (onChange)="finishEditing(item)"
      (onBlur)="finishEditing(item)"
    ></p-dropdown>
  </ng-template>
</p-chips>

2. 组件逻辑（TypeScript） #

import { Component } from '@angular/core';
import { SelectItem } from 'primeng/api';

@Component({
  selector: 'app-editable-chips',
  templateUrl: './editable-chips.component.html'
})
export class EditableChipsComponent {
  // 初始Chip数据，每个项包含显示值和编辑状态
  values = [{ value: 'Value1', isEditing: false }];
  
  // 下拉可选选项列表
  cities: SelectItem[] = [
    { label: 'New York', value: 'New York' },
    { label: 'London', value: 'London' },
    { label: 'Paris', value: 'Paris' }
  ];

  // 触发编辑：切换当前项的编辑状态
  startEditing(item: any) {
    item.isEditing = true;
    // 延迟聚焦下拉框，确保DOM渲染完成
    setTimeout(() => {
      const dropdown = document.querySelector('.p-dropdown') as HTMLElement;
      dropdown?.focus();
    }, 0);
  }

  // 结束编辑：切换回文本显示状态
  finishEditing(item: any) {
    item.isEditing = false;
  }
}

3. 关键细节说明 #

• 给p-chips设置[readonly]="true"，禁用组件默认的添加/删除输入框，只保留自定义Chip项
• 每个Chip项为对象结构，通过isEditing标记控制视图切换
• 点击文本时触发编辑状态，自动聚焦下拉框提升交互体验
• 下拉框选择完成或失去焦点时，自动切回文本显示状态并更新Chip值

效果验证 #

• 初始状态：页面显示包含Value1的Chip
• 点击操作：点击Value1后，Chip切换为下拉选框
• 选择更新：选择New York后，下拉框消失，Chip内容更新为New York

内容的提问来源于stack exchange，提问作者Maciej Skoczek