angular - 升级到最新版本后，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 或更高版本。你必须更新新代码