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

admin管理员组

文章数量:1279112

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

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

• javascript
• angular
• angular4-forms
• angular-ngselect

Share Improve this question Follow edited Feb 15, 2019 at 12:40 hamwac5 asked Feb 15, 2019 at 12:34 hamwac5hamwac5 9911 gold badge33 silver badges1515 bronze badges 4

• Don't see selectedItems anywhere in the code you posted. – Jeto Commented Feb 15, 2019 at 12:49
• Please elobrate your code i cant get your problem if possible replicate it using stackblitz. – Vignesh Commented Feb 15, 2019 at 12:53
• selectedItems don"t exists in my code its in ng-select – hamwac5 Commented Feb 15, 2019 at 14:08
• my html code : pastebin./Rh9w4FsL – hamwac5 Commented Feb 15, 2019 at 14:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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

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>

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

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>

本文标签： javascriptAngular ngselectselectedItemsmap is not a functionStack Overflow