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) :

Please elobrate your code i cant get your problem if possible replicate it using stackblitz. — Vignesh, Feb 15 '19 at 12:53

score 3 · Answer 1 · answered May 25 '21 at 10:17

3

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.

answered May 25 '21 at 10:17

d1fficult

931
8
18

score 2 · Accepted Answer · answered Apr 16 '19 at 09:56

Without the code is difficult to know, but today I had the same error. The reason was that I determined a default value in the FormControl that had no relation with the array that ng-select demands. When the FormGroup loaded, and this mistaken default was loaded into the ng-select, the error was selectedItems.map is not a function

score 2 · Answer 3 · answered Aug 31 '21 at 23:13

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>

score 1 · Answer 4 · answered Jun 04 '20 at 09:27

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);
    });

score 0 · Answer 5 · answered Feb 09 '22 at 11:34

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>

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

5 Answers5