web-dev-qa-db-fra.com

ng-select dans Angular5: ERREUR TypeError: Object (...) n'est pas une fonction de NgDropdownPanelComponent.ngOnInit (ng-select.js

Je travaille avec ng-select 2.0.0 dans mon projet angular5 comme dans ce lien , je peux obtenir des résultats à partir du démarrage à ressort de l'api rest mais je suis fasciné par un problème j'obtiens cette erreur pendant que je cliquez sur ng-select:

ERROR TypeError: Object(...) is not a function
at NgDropdownPanelComponent.ngOnInit (ng-select.js:1450)
at checkAndUpdateDirectiveInline (core.js:12352)
at checkAndUpdateNodeInline (core.js:13876)

et aussi je ne peux pas sélectionner les informations (dans ce cas, l'attribut 'nom') que je veux, c'est comme si le ng select est bloqué ou quelque chose comme ça.

c'est mon code pour project.component.html

<ng-select  *ngIf="_listClients"
             [items]="listClient"
              bindLabel ="nom"
              bindValue ="id"
            [(ngModel)]="selectedPersonId">

</ng-select>

<p>
  Selected city ID: {{selectedPersonId | json}}
</p>

Il s'agit du fichier project.component.ts

    import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ProjetService} from '../../../../../service/projet.service';
import {Projet} from '../../Models/Projet';
import { ModalDirective } from 'ngx-bootstrap/modal';
import 'rxjs/add/operator/map';
import {ClientService} from '../../../../../service/client.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {

  selectedPersonId:number = null;
  _listClients :any;


constructor(private router:Router,
              private projetSevice:ProjetService,
              private clientServ:ClientService,
              private route: ActivatedRoute) { }

ngOnInit() {

       this.clientList();
  }


get listClient() {
     return this._listClients ? this._listClients.map(item => {
      return {id: item.id, prenom : item.prenom , nom : item.nom}
    }) : [];
  }


  clientList(){

     this.clientServ.getListClients()
       .subscribe((data:any)=>{
        this._listClients=data;
       },err=>{
         console.log('this is error ');
       })

  }

}

De l'aide ?

angulartwitter-bootstrapbootstrap-4angular5angular2-template
8
dEs12ZER

(Copiez simplement en collant la réponse de mon commentaire pour fermer la question)

Je pense,ng-select v2.0.0 a ce problème. J'ai trouvé 2 demandes de problème dans le dépôt GitHub.

Solution de contournement:

Essayez de rétrograder la version à v1.4.1.

npm uninstall @ng-select/ng-select 
npm i -s @ng-select/[email protected]

EDIT: (25.05.18)

Il y a un problème pour interrompre les modifications de Rxjs 6.0. Si vous utilisez Angular v5 installer ng-select v1.x ou installez ng-select v2.0+ avec rxjs-compat.

npm i -s @ng-select/[email protected]
//or
npm i -s @ng-select/ng-select@latest rxjs-compat
24
Ritwick Dey

Comme indiqué dans le readme du repo https://github.com/ng-select/ng-select#v2 :

La dernière version cible Angular v6 car elle utilise un nouveau RxJS qui a des changements de rupture. Si vous utilisez Angular v5 vous pouvez utiliser ng-select v1.x ou installer Paquet de compatibilité rxjs-compat. Nous prendrons en charge v1.x avec les dernières corrections de bogues pour permettre une migration plus facile. Pour v1.x, vous pouvez vous référer à la branche 1.x.

Cependant, l'utilisation de v2.0.0 avec rxjs-compat n'a pas fonctionné pour moi. J'utilise Angular v5.2.9.

3
Mrvonwyl