Angular ng-select : selectedItems.map is not a function

Question

When I'm using ng-select in reactive form angular I get this error:

ERROR TypeError: selectedItems.map is not a function

I have 3 select the first two work very well but in this third one I get the error ! to map item i'm using the function (the ng-select is inside *ngFor) :

//for mappinig item : 
mapLabelValueBS(objet) {
return objet.map(data => {
 return {
   id: data,
   text: data.name
 }
})
}
//this is the one that is causing the problem
<ng-select 
  [allowClear]="true"                                                 
  [items]="mapLabelValueBS(filieres)"
  placeholder="Filière non sélectionné"                                             
  (selected)="selecteFiliere($event)"                                                     
  formControlName="filiere">
</ng-select>

the result in my page (when I click on the field it doubles itself) :

Answer 1

few days ago i came across this error if you are binding a list that is filled from backend server be sure to fill the list using concat method like this

   this.userService.getLookup().subscribe((res: any) => {
        this.apps = this.apps.concat(res.data);
    });

Answer 2

This error came while I was passing [items]="value" where the value was not an array, so please check if you are not passing non array element to items binding.

Answer 3

You are trying to bind the items of object type. [items] attribute accepts an array. You can trying adding a pipe keyvalue

<ng-select 
  [allowClear]="true"                                                 
  [items]="jsonData | keyvalue"
  placeholder="Filière non sélectionné"                                             
  (selected)="selecteFiliere($event)"                                                     
  formControlName="filiere">
</ng-select>

Answer 4

I had same problem, because the list of items was undefined sometime in the middle of page preparing, so I added a silly condition to show those select only when the list of items is ready:

<ng-select 
  *ngIf="selectedItems.map"
  [allowClear]="true"                                                 
  [items]="jsonData | keyvalue"
  placeholder="Filière non sélectionné"                                             
  (selected)="selecteFiliere($event)"                                                     
  formControlName="filiere">
</ng-select>