PrimeNG P-ListBox选择项时抛出错误求助

Got it, let's break down why this error is popping up and how to fix it right away.

The core problem here is that when you use p-listbox with multiple="multiple" and checkbox="checkbox", the component expects the bound value (your programType form control) to be an array at all times. Right now, your form control is probably initialized to undefined or a non-array value, so when you click a checkbox, the component tries to call concat()—an array-only method—on a non-array, hence the error.

Here's how to resolve it: #

1. Initialize your form control with an empty array
   You need to make sure the programType control starts with an empty array as its initial value. Update your component code like this:

   import { ListboxModule } from 'primeng/primeng';
   import { FormBuilder, FormGroup } from '@angular/forms'; // Don't forget these imports
   
   export class SearchCareResultsComponent {
     phoneTypeItems = [{ label: 'Mobile', value: '1' }, { label: 'Work', value: '2' }, { label: 'Home', value: '3' }];
     searchForm: FormGroup; // Define your form group
   
     constructor(private fb: FormBuilder) {
       // Initialize the form with programType set to an empty array
       this.searchForm = this.fb.group({
         programType: [[]]
       });
     }
   }
   

   If you're using a standalone FormControl instead of a FormGroup, initialize it like this:

   programType = new FormControl([]);
   

2. Double-check your template binding
   Your existing template code is correct, but just confirm that formControlName="programType" matches the control name in your FormGroup, and that multiple="multiple" is properly set.

Why this works: #

PrimeNG's Listbox component in multi-select mode relies on array operations (like concat) to manage selected items. By initializing the control to an empty array, you're giving the component the data type it expects from the start, so when you click checkboxes, it can safely perform those array operations without throwing errors.

You can verify this by adding a quick log in ngOnInit to confirm the initial value:

ngOnInit() {
  console.log(this.searchForm.get('programType').value); // Should log []
}

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