Angular18+PrimeNG17多选组件绑定输入信号报错：visibleOptions.filter不是函数

问题背景 #

我有一个Angular 18.1应用，使用PrimeNg 17.18.5（官方文档显示该版本兼容Angular 18）。将多选组件绑定到初始化为[]的input signal时，抛出错误：TypeError: visibleOptions.filter is not a function。调试PrimeNg代码发现，本应为对象列表的visibleOptions意外变成了signal，导致filter调用失败。

PrimeNG错误代码位置 #

constructor(el, renderer, cd, zone, filterService, config, overlayService) {
        this.el = el;
        this.renderer = renderer;
        this.cd = cd;
        this.zone = zone;
        this.filterService = filterService;
        this.config = config;
        this.overlayService = overlayService;
        effect(() => {
            const modelValue = this.modelValue();
            const visibleOptions = this.visibleOptions();
            if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
                if (this.optionValue && this.optionLabel && modelValue) {
                    // 报错位置：visibleOptions不是数组，无法调用filter
                    this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
                }
                else {
                    this.selectedOptions = modelValue;
                }
                this.cd.markForCheck();
            }
        });
    }

组件模板代码 #

<div class="field">
     <label class="input-label">Name *</label>
     <p-multiSelect [options]="tables()" [(ngModel)]="selectedTables" appendTo="body" optionValue="tableId" optionLabel="name" panelStyleClass="widthOverride"></p-multiSelect>
</div>

组件类代码 #

...
@Component({
    selector: 'app-edit-table',
    templateUrl: './edit-table.component.html',
    styleUrls: ['./edit-table.component.css'],
    standalone: true,
    imports: [...]
})
export class EditTableComponent implements OnInit {

tables = input<TablesModel[]>([]);
selectedTables = signal<TablesModel[]>([]);

...
// 其余代码
...
}

修复方案 #

方案1：改用model绑定而非ngModel #

PrimeNG 17对Angular Signals的支持更适配model绑定（而非ngModel），直接替换模板中的绑定语法即可：

<p-multiSelect [options]="tables()" [(model)]="selectedTables" appendTo="body" optionValue="tableId" optionLabel="name" panelStyleClass="widthOverride"></p-multiSelect>

方案2：将Signal转为Observable（兼容旧写法） #

如果要保留ngModel，可把信号转为Observable后用async管道绑定：

1. 组件类中添加转换逻辑：

import { toObservable } from '@angular/core';

selectedTables$ = toObservable(this.selectedTables);

2. 修改模板绑定：

<p-multiSelect [options]="tables()" [(ngModel)]="selectedTables$ | async" appendTo="body" optionValue="tableId" optionLabel="name" panelStyleClass="widthOverride"></p-multiSelect>

方案3：升级PrimeNG版本 #

尽管官方标注17.18.5兼容Angular 18，但可能存在信号绑定的小bug，升级到PrimeNG 17.x最新版或18.x版本，大概率能修复该兼容性问题。

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