Reputation: 2111
I have a Angular 18.1 application in which I am using PrimeNg 17.18.5 (which according to their documentation should be compatible with ng 18). In this application, I have a multiselect bound to an input signal initialized with []. The error I am getting is:
TypeError: visibleOptions.filter is not a function
at EffectHandle.effectFn (primeng-multiselect.mjs:864:59)
Drilling down into PrimeNg's code, I found the error in the line marked with >>>:
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) {
>>> this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
}
else {
this.selectedOptions = modelValue;
}
this.cd.markForCheck();
}
});
}
When I breakpointed the app there, it seems that the visibleOptions, which should a simple list of objects, for some reason converts into an actual signal, hence the error.
Here is my component's markup:
<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>
and the component class:
...
@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[]>([]);
...
the rest of the code
...
}
The tables input is provided by the parent component. There is a lot of code in both components. I have only included the code I think is relevant, let me know if you need more info.
Any idea on how to fix that error?
Upvotes: 1
Views: 245