简体   繁体   中英

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

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

在此处输入图片说明

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

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

当我传递 [items]="value" 值不是数组时出现此错误,因此请检查您是否没有将非数组元素传递给 items 绑定。

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM