升级到最新版本后，ng-select 下拉菜单在 UI 上中断 - Angular 6

Question

我已将我的应用程序从 Angular 5 迁移到 Angular 6。我还将 ng-select 版本更新为 2.4.2，最新版本来自 npm / GitHub.

升级后，下拉菜单坏了，我看不到下拉菜单的设计或样式。 UI.

上 HTML 损坏的列表

有谁知道如何修复它或哪个版本的 ng-select 可以与 Angular 6 一起使用？

我必须使用 ng-select 2+ 版本，因为那里有 'labelForId' 属性。

这就是 package.json 的样子。

"dependencies": {
    "@angular/animations": "^6.1.3",
    "@angular/common": "^6.1.3",
    "@angular/compiler": "^6.1.3",
    "@angular/core": "^6.1.3",
    "@angular/forms": "^6.1.3",
    "@angular/http": "^6.1.3",
    "@angular/platform-browser": "^6.1.3",
    "@angular/platform-browser-dynamic": "^6.1.3",
    "@angular/router": "^6.1.3",
    "@ng-bootstrap/ng-bootstrap": "^3.0.0",
    "@ng-select/ng-select": "2.4.2",

这是它的样子。

有人知道怎么解决吗？

奇怪的是它在 "@ng-select/ng-select": "^0.16.0",

中工作正常

Answer 1

检查是否在主应用组件中导入主题文件(doc)

@import "~@ng-select/ng-select/themes/default.theme.css";
// ... or 
@import "~@ng-select/ng-select/themes/material.theme.css";

编辑：ng-select 的 html 模板是这样的吗？ (demo)

<ng-select [items]="items"
         bindLabel="name"
         bindValue="name"
         placeholder="Select city"
         [(ngModel)]="selectedCityName">
  <ng-template ng-option-tmp let-item="item" let-index="index">
      <img height="15" width="15" [src]="item.avatar"/>
      <b>{{item.name}}</b>
  </ng-template>
</ng-select>

如果不是，则模板已过时。您的代码不能用于 ng-select 版本 2 或更高版本。您必须更新新代码

升级到最新版本后，ng-select 下拉菜单在 UI 上中断 - Angular 6

ng-select dropdown is breaking on UI after upgrading to latest versions - Angular 6

npm

angular-ngselect

angular