Primeng MultiSelect动态选中值显示为null问题求助

问题重现 #

使用PrimeNG MultiSelect组件时，通过[(ngModel)]绑定的horse_ids始终显示为null，组件代码如下：

<p-multiSelect 
  [options]="horses"
  [(ngModel)]="horse_ids"
  placeholder="Select Horse"
  optionLabel="horse_name"
  class="form-control w-100"
  filterPlaceHolder="Search Horse"
  [maxSelectedLabels]="3"
  selectedItemsLabel="{0} horses selected"
  (onChange)="horseselect()"
>
<p-mutliSelect>

排查与解决步骤 #

• 修复标签拼写错误
  组件的关闭标签拼写错误：<p-mutliSelect>应该改为<p-multiSelect>（少了一个字母l）。标签不匹配会导致组件渲染异常，直接影响ngModel的双向绑定功能。

• 初始化绑定变量为数组
  MultiSelect是多选组件，绑定的ngModel变量必须初始化为空数组，不能是null或undefined。在组件类中添加初始化代码：

  // 若绑定的是对象数组，可替换为对应类型，比如 Horse[]
  horse_ids: any[] = [];
  

• 配置optionValue（按需）
  如果你的horses数组中的每个对象包含id字段（比如{id: 1, horse_name: "Horse A"}），且你需要绑定的是id而非整个对象，必须显式设置optionValue属性：

  <p-multiSelect 
    [options]="horses"
    [(ngModel)]="horse_ids"
    optionLabel="horse_name"
    optionValue="id" <!-- 新增这一行 -->
    <!-- 其他属性保持不变 -->
  >
  </p-multiSelect>
  

  若不设置optionValue，默认会将整个选中的对象存入horse_ids，如果你的逻辑期望存储id，就必须配置这个属性。

• 确认FormsModule已导入
  确保在你的Angular模块（如AppModule）中导入了FormsModule，否则ngModel指令无法生效：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms'; // 导入FormsModule
  import { MultiSelectModule } from 'primeng/multiselect'; // 确保PrimeNG模块已导入
  
  @NgModule({
    imports: [BrowserModule, FormsModule, MultiSelectModule],
    // 其他配置
  })
  export class AppModule { }
  

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