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

Question

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

升级后，下拉列表中断，我看不到下拉列表的设计或样式。只是UI上HTML损坏的列表。

有人知道如何修复它，或者哪个版本的ng-select可以在Angular 6中使用？

由于那里的'labelForId'属性，我必须使用ng-select 2+版本。

这是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或更高版本无法使用您的代码。您必须更新新代码