ng-select 项目不可见答案

【问题标题】：ng-select items not visibleng-select 项目不可见
【发布时间】：2022-05-04 23:33:57
【问题描述】：

我将 ng-select 添加到一个新的 Angular 11 应用程序中，它似乎工作正常，直到我打开下拉菜单。当我打开下拉列表时，我可以选择项目，但我并没有真正看到它们。每次打开下拉菜单时，控制台都会出现 3 个错误：

zone-evergreen.js:659 Unhandled Promise rejection: Cannot read properties of undefined (reading 'clientHeight') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'clientHeight')
    at ng-select.js:2268:1
    at ZoneDelegate.invoke (zone-evergreen.js:364:1)
    at Zone.run (zone-evergreen.js:123:1)
    at zone-evergreen.js:857:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Zone.runTask (zone-evergreen.js:167:1)
    at drainMicroTaskQueue (zone-evergreen.js:569:1)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484:1)
    at invokeTask (zone-evergreen.js:1621:1)
    at HTMLDivElement.globalZoneAwareCallback (zone-evergreen.js:1647:1) TypeError: Cannot read properties of undefined (reading 'clientHeight')
    at http://localhost:4200/vendor.js:12640:59
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:9528:30)
    at Zone.run (http://localhost:4200/polyfills.js:9287:47)
    at http://localhost:4200/polyfills.js:10021:40
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:9563:35)
    at Zone.runTask (http://localhost:4200/polyfills.js:9331:51)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.js:9733:39)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:9648:25)
    at invokeTask (http://localhost:4200/polyfills.js:10785:18)
    at HTMLDivElement.globalZoneAwareCallback (http://localhost:4200/polyfills.js:10811:21)

ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at NgDropdownPanelComponent.ngOnInit (ng-select.js:2102:1)
    at callHook (core.js:4776:1)
    at callHooks (core.js:4746:1)
    at executeInitAndCheckHooks (core.js:4698:1)
    at selectIndexInternal (core.js:8140:1)
    at Module.ɵɵadvance (core.js:8123:1)
    at NgSelectComponent_ng_dropdown_panel_13_Template (ng-select.js:244:21)
    at executeTemplate (core.js:9269:1)
    at refreshView (core.js:9138:1)
    at refreshEmbeddedViews (core.js:10245:1)

core.js:5973 ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at NgDropdownPanelComponent.ngOnInit (ng-select.js:2102:1)
    at callHook (core.js:4776:1)
    at callHooks (core.js:4746:1)
    at executeInitAndCheckHooks (core.js:4698:1)
    at selectIndexInternal (core.js:8140:1)
    at Module.ɵɵadvance (core.js:8123:1)
    at NgSelectComponent_ng_dropdown_panel_13_Template (ng-select.js:244:21)
    at executeTemplate (core.js:9269:1)
    at refreshView (core.js:9138:1)
    at refreshEmbeddedViews (core.js:10245:1)

老实说，我什至不知道该看什么。它似乎功能正常，但显示不正确。

package.json（所有 Angular 包都在 11.0.1）：

"@ng-select/ng-select": "^2.20.5",

这是模板：

<ng-select [items]="types"
  bindLabel="name"
  bindValue="id"
  placeholder="Select type"
  [(ngModel)]="selectedType">
</ng-select>

我也将NgSelectModule 添加到了我的 app.module.ts 中。

【问题讨论】：

您能否在 stackblitz.com 上提供您的代码来重现此问题？
只是好奇你是否找到了答案。我有同样的问题。我有工作下拉菜单，但刚刚从 Angular 7 升级到 9。
不幸的是，我想我没能弄明白。我最终采取了不同的方法，或者最终采用了不同的方法，这与我记得的并且有效。

标签： angular angular11 angular-ngselect

【解决方案1】：

我相信这归结为安装特定版本的 ng-select。如果你去https://www.npmjs.com/package/@ng-select/ng-select，你可以看到版本表。将您的 Angular 版本与正确版本的 ng-select 匹配并安装。

例如，如果您使用 Angular 9，则必须运行 npm i @ng-select/ng-select@4.0.4。我希望这会有所帮助。

【讨论】：