Angular中如何让PrimeNG p-multiSelect选中项排在下拉列表首位

要让<p-multiSelect>中已勾选的选项始终显示在列表顶部，你可以通过在选择变更时重新排序选项数组来实现，具体步骤如下：

步骤1：修改组件中的onSelectionChange方法 #

在组件类中更新onSelectionChange函数，对myOptions重新排序，把已选中的选项移到数组最前面：

onSelectionChange() {
  // 创建数组副本，避免直接修改原数组导致视图不更新
  this.myOptions = [...this.myOptions].sort((a, b) => {
    // 判断选项是否在选中列表内
    const isASelected = this.selectedOptions.some(opt => opt.id === a.id);
    const isBSelected = this.selectedOptions.some(opt => opt.id === b.id);
    
    // 选中项优先级更高：a选中b未选则a在前，反之b在前，其余情况保持原顺序
    if (isASelected && !isBSelected) return -1;
    if (!isASelected && isBSelected) return 1;
    return 0;
  });
}

步骤2：适配选项标识字段 #

如果你的选项对象唯一标识不是id，把代码中的id替换成实际使用的字段（比如value）即可。

步骤3：处理初始选中的情况 #

如果页面加载时selectedOptions已有默认选中值，在组件初始化阶段也要执行一次排序，确保初始状态下选中项就在顶部：

ngOnInit() {
  // 初始化时执行排序
  this.onSelectionChange();
}

关键代码示例（组件类部分） #

import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  myOptions: any[] = [
    { id: 1, label: '选项1' },
    { id: 2, label: '选项2' },
    { id: 3, label: '选项3' }
  ];
  selectedOptions: any[] = [];

  ngOnInit() {
    this.onSelectionChange();
  }

  onSelectionChange() {
    this.myOptions = [...this.myOptions].sort((a, b) => {
      const isASelected = this.selectedOptions.some(opt => opt.id === a.id);
      const isBSelected = this.selectedOptions.some(opt => opt.id === b.id);
      
      if (isASelected && !isBSelected) return -1;
      if (!isASelected && isBSelected) return 1;
      return 0;
    });
  }

  isInheritedFromMain(id: number, relType: any): boolean {
    // 你的业务逻辑
    return false;
  }
}

注意事项 #

• 必须创建数组副本（[...this.myOptions]），否则Angular变更检测无法识别数组变化，导致视图不更新。
• 如果选项是异步获取的，要在数据加载完成后再执行初始排序。

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