Angular中的ng-select问题:ERROR TypeError:Object(...)不是NgDropdownPanelComponent.ngOnInit(ng-select.js)中的函数

时间:2018-05-13 12:30:01

标签: angular twitter-bootstrap bootstrap-4 angular5 angular2-template

我在我的项目angular5中使用ng-select 2.0.0,就像this link一样 ,我可以从api休息弹簧启动得到结果,但是当我点击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)

并且我也无法选择我想要的信息(在这种情况下属性' 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 ');
       })

  }

}

有任何帮助吗?

1 个答案:

答案 0 :(得分:3)

正如回购https://github.com/ng-select/ng-select#v200的自述文件中所述:

  

最新版本针对Angular v6,因为它使用了新的RxJS   突破变化。如果您使用的是Angular v5,则可以使用ng-select   v1.x或安装rxjs-compat compatability包。我们会支持   v1.x包含最新的错误修复,以便更轻松地进行迁移。对于v1.x,你可以   参考1.x分支。

然而,将v2.0.0与rxjs-compat一起使用并不适用于我。我使用的是Angular v5.2.9。