升级到最新版本后，ng-select下拉框在UI上出现问题 - Angular 6

Question

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

升级后，下拉列表出现问题，我无法看到下拉列表的设计或样式，只有一堆带有破损HTML的li标签。

有人知道如何修复它或哪个版本的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"中它运行良好。

- Aakash Kumar

Answer 1

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

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

编辑：您的html模板是否像这样为ng-select进行了设置？ (演示)

<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或更高版本中使用。您需要更新新的代码。

- hgiasac

---

我添加了一个下拉菜单，但内部内容是div，它仍然保持原样。请查看我更新的问题中附带的图片。 - Aakash Kumar

在 [items] 下，我正在从组件中传递一些内容，其中包括一些 div 和 span。请查看我的更新问题图像。它只是添加了 <divs，但没有任何效果。 - Aakash Kumar

我更新了 ng-select 的代码和演示。如果你的代码不匹配，请更新你的代码。它已经过时了。 - hgiasac

我使用ng-option-tmp和ng-template添加了上述代码，但在用户界面上仍然可以看到标签。 - Aakash Kumar

我通过记得提交 package.json 文件来解决了问题... 扇自己一巴掌。 - Drew