如何在Angular 6的Ng-select下用黄色高亮显示选项。

Question

在我的项目中，我已经实现了Ng-select，但是我想在搜索选项时突出显示该选项的特定亮点。

我发现了一些技术，但这并不能满足我的问题，你可以检查它。此处

这是我的代码

超文本标记语言

<ng-select [items]="HSNCodeArray" bindLabel="name" bindValue="name" [clearable]="false" placeholder="Select HSN Code">
    <ng-template ng-label-tmp let-city="item">
                <span class="text-uppercase">{{ city.name }}</span>
            </ng-template>
  <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
     <div [ngOptionHighlight]="search" class="text-uppercase">{{ item.name }}</div>
  </ng-template>
</ng-select>

TS

this.HSNCodeArray = [
      { 
        name: 'kiran',
      },
      {
        name: 'Mehul',
      },
      {
        name: 'Smoking',  
      }
    ];
  }

我的期望是：当我搜索与下拉选项相关的东西时，我想用黄色或橙色突出显示选项。

谢谢你的帮助

Answer 1

你必须覆盖在你的项目文件下的CSS。风格.css

覆盖这个CSS下的 风格.css

CSS

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted {
    background-color: orange !important;
    font-weight: bold !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

你可以查看我的stackblitz 喏