ng-select in Angular5 issue : ERROR TypeError: Object(...) is not a function at NgDropdownPanelComponent.ngOnInit (ng-select.js

Question

我在我的项目 angular5 中使用 ng-select 2.0.0，如 this link ，我可以从 api rest spring 引导中获得结果，但我遇到了一个问题，当我单击 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)

而且我也无法 select 我想要的信息（在本例中为属性 'nom'），就像 ng select 被阻止或类似这样的事情。

这是我的 project.component.html

代码

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

</ng-select>

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

这是文件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 ');
       })

  }

}

有什么帮助吗？

Answer 1

（只需复制粘贴我评论中的答案即可关闭问题）

我想，ng-select v2.0.0 有这个问题。我在 GitHub 仓库中找到了 2 个问题请求。

解决方法：

尝试将版本降级到v1.4.1。

npm uninstall @ng-select/ng-select 
npm i -s @ng-select/ng-select@1.4.1

编辑：(25.05.18)

Rxjs 6.0 的中断更改存在问题。如果您使用 Angular v5 安装 ng-select v1.x 或使用 rxjs-compat 安装 ng-select v2.0+。

npm i -s @ng-select/ng-select@1.x
//or
npm i -s @ng-select/ng-select@latest rxjs-compat

Answer 2

如 repo 的自述文件所述 https://github.com/ng-select/ng-select#v200:

Latest version targets Angular v6 since it uses new RxJS which has breaking changes. If you are using Angular v5 you could use ng-select v1.x or install rxjs-compat compatability package. We will support v1.x with latest bug fixes to allow easier migration. For v1.x you can refer the 1.x branch.

然而，将 v2.0.0 与 rxjs-compat 一起使用对我不起作用。我正在使用 Angular v5.2.9.

Answer 3

以下是您为相应 Angular.x

安装的 ng-select 版本

if >=13.0.0 <14.0.0 - ng-select 版本应该是 v8.x
if >=12.0.0 <13.0.0 - ng-select 版本应该是 v7.x
if >=11.0.0 <12.0.0 - ng-select 版本应该是 v6.x
if >=10.0.0 <11.0.0 - ng-select 版本应该是 v5.x
if >=9.0.0 <10.0.0 - ng-select 版本应该是 v4.x
if >=8.0.0 <9.0.0 - ng-select 版本应该是 v3.x
if >=6.0.0 <8.0.0 - ng-select 版本应该是 v2.x
if v5.x.x - ng-select 版本应该是 v1.x

ng-select in Angular5 issue : ERROR TypeError: Object(...) is not a function at NgDropdownPanelComponent.ngOnInit (ng-select.js