Question

我在我的角度项目中使用ng-select（https://ng-select.github.io/ng-select#/data-sources）库来显示一个下拉列表，如下所示：

<ng-select
  [items]="flattenedSelectList"
  bindLabel="displayName"
  placeholder="Select specialty"
  notFoundText="No results found. Please try a different search criteria."
  bindValue="id"
  groupBy="type"
  [(ngModel)]="selectedSpecialtyId">
</ng-select>

我想设置组标题以及每个组内项目的样式？我该怎么办？

我在.scss文件中使用了以下内容，但它似乎没有应用更改。 ng-optgroup用于组标题，ng-option-label用于项目。

.ng-optgroup {
  font-weight: bold;
  color: #dbe8ef;
}

.ng-option-label{
  color: red;
}

Answer 1

使用此样式并添加核心文件style.css：

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{
  font-weight: bold;
  color: #dbe8ef;
}
.ng-option-label{
  color: red;
}

Stackblitz：https://stackblitz.com/edit/angular-ztb1ug

ng选择样式组的标题和项目

1 个答案: