web-dev-qa-db-ja.com

Angular5問題のng-select：エラーTypeError：Object（...）はNgDropdownPanelComponent.ngOnInit（ng-select.js）の関数ではありません

this link のように、私のプロジェクトangular5でng-select 2.0.0を使用しています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 ');
       })

  }

}

何か助け？

angulartwitter-bootstrapbootstrap-4angular5angular2-template
8
dEs12ZER

（質問を閉じるには、コメントから回答を貼り付けてください）

ng-select v2.0.0にこの問題があると思います。 GitHubリポジトリで2つのリクエストを見つけました。

回避策：

バージョンをv1.4.1にダウングレードしてみてください。

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

編集：（25.05.18）

問題はRxjs 6.0からの変更を破壊するためです。 Angular v5 install ng-select v1.xを使用している場合、またはng-select v2.0+とともにrxjs-compatをインストールしている場合。

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

リポジトリのreadmeに記載されているとおり https://github.com/ng-select/ng-select#v2 ：

最新バージョンは、Angular v6を対象としています。これは、重大な変更がある新しいRxJSを使用しているためです。 Angular v5を使用している場合、ng-select v1.xを使用するか、rxjs-compat互換性パッケージをインストールできます。移行を容易にするために、最新のバグ修正でv1.xをサポートします。 v1.xの場合、1.xブランチを参照できます。

しかし、rxjs-compatでv2.0.0を使用しても機能しませんでした。 Angular v5.2.9を使用しています。

3
Mrvonwyl