Angular中@Input传值绑定PrimeNG Listbox时选中值交替为null和对象

问题原因 #

你遇到的交替返回[object Object]和null的现象是两个原因共同导致的：

1. PrimeNG ListBox 单选模式默认支持点击已选中项取消选中，所以你第一次点击是选中状态，返回对应的route对象，第二次点击是取消选中，返回null，第三次再次选中，以此交替。
2. 你尝试把selectedRoute修改为PageNavigation类型后返回undefined，是因为你给ListBox设置了optionValue="route"，选中后返回的值是PageNavigation中的route属性（也就是Route类型对象），不是完整的PageNavigation对象，类型不匹配自然拿不到值。

修复方案 #

1. 修正类型定义和跳转逻辑

先把Sidebar组件的类型和跳转逻辑改对：

import { Route } from "@angular/router";
// 其他导入不变

export class SidebarComponent {
  // 选中值是Route类型，不是PageNavigation
  public selectedRoute?: Route;
  // Input不要加any类型
  @Input() pageNavigations : PageNavigation[] = [];

  constructor(public router : Router) { }

  navigate(): void {
    // 过滤null、无路径的无效值
    if (!this.selectedRoute?.path) return;
    // router.navigate接收的是路径字符串，不要直接传整个Route对象
    this.router.navigate([this.selectedRoute.path]).then(() => {
      // 跳转成功逻辑
    }, () => {
      // 跳转失败逻辑
    });
  }
}

2. 优化ListBox配置

如果不需要选中后取消的逻辑，可以给ListBox加allowNoSelect="false"属性（PrimeNG 14及以上版本支持），禁止无选中状态，避免用户点击两次出现null：

<p-listbox 
  [options]="pageNavigations" 
  [(ngModel)]="selectedRoute" 
  optionLabel="displayName" 
  optionValue="route"
  <!-- 禁止无选中状态 -->
  [allowNoSelect]="false"
  <!-- 引用类型对比用path作为唯一标识，避免默认选中失效 -->
  dataKey="path"
  (ngModelChange)="navigate()" 
></p-listbox>

如果是旧版本PrimeNG没有allowNoSelect属性，保留navigate方法里的空值判断逻辑即可，遇到null的时候直接跳过跳转，不影响正常使用。

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