Angular5集成ng-select2.0.0报错及无法选择问题求助

Hey there, I’ve run into this exact issue before with Angular 5 and ng-select 2.x. Let’s break down what’s happening and how to fix it quickly.

The Object(...) is not a function error you’re seeing is almost certainly a compatibility mismatch. ng-select version 2.0.0 is built for Angular 6 and above, which uses RxJS 6. But Angular 5 relies on RxJS 5.x, and the two versions handle operators very differently—this is what’s causing the dropdown panel to throw an error and freeze up.

Here are your two best solutions:

Option 1: Downgrade ng-select to a compatible version (fastest fix) #

ng-select v1.x is specifically designed to work with Angular 4 and 5. Uninstall your current version and install the latest stable v1 release:

npm uninstall @ng-select/ng-select
npm install @ng-select/ng-select@1.6.3 --save

Once you do this, your existing code should work without any changes—your bindLabel, bindValue, and ngModel setup is already correct for v1. Just refresh your app and the dropdown should start working as expected.

Option 2: Upgrade Angular to 6+ (more involved) #

If you want to stick with ng-select 2.0.0, you’ll need to upgrade your Angular project to version 6 or higher. This will require updating RxJS to 6, which means changing how you use operators like map.

For example, instead of the RxJS 5-style import:

import 'rxjs/add/operator/map';

You’ll need to use pipeable operators from RxJS 6:

import { map } from 'rxjs/operators';

// Then wrap your map in a pipe() call
this.clientServ.getListClients().pipe(
  map(data => /* your transformation logic */)
).subscribe(...);

Keep in mind that upgrading Angular involves more than just changing RxJS—you’ll need to update @angular/core, the Angular CLI, and other dependencies to match the Angular 6+ version. Follow the official Angular upgrade guide for your specific version jump to avoid breaking other parts of your app.

Quick code sanity check #

Once you fix the compatibility issue, your component code should work, but a small improvement would be initializing _listClients as an empty array to avoid any null-related hiccups:

_listClients: any[] = [];

This way, even before your API call finishes, the listClient getter will return an empty array instead of undefined, which helps with change detection.

After applying either fix, the ng-select should no longer freeze, and you’ll be able to select items and see the selected ID update in your template.

内容的提问来源于stack exchange，提问作者dEs12ZER