html - 动态附加符号到下拉选项

Question

我的页面上有一个下拉菜单，如果满足某些情况，我想在每个选项旁边动态附加一个复选标记。当我尝试以下操作时:

<select>
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span class="fa fa-check"></span></option>
  </select>

这没有用。选项上没有附加任何内容。我什至尝试过一个普通的 Angular 色:

<select>
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span>X</span></option>
  </select>

没有用。尽管该特定请求是客户要求，但我尝试了以下方法来提供替代解决方案:

<select>
    <option *ngFor="let cl of classes; trackBy id" [ngClass]="{'is-active':cl.selectedStudent=true}">{{cl.label}}</option>
  </select>

.is-active {
  background-color: yellow;
}

它会将选项突出显示为黄色。这也没有用。然后我终于尝试只获得一个下拉选项以使用内联样式突出显示:

<select>
    <option *ngFor="let cl of classes; trackBy id" style="background:yellow;">{{cl.label}}</option>
  </select>

这也没有用。无论我做什么，我都无法为下拉菜单提供任何样式。有没有我遗漏的东西，或者您无法设置下拉选项的样式？我在 MacOS 上使用 Chrome。

Answer 1

您不能在 <options> 中使用 innerHtml 标签标签。但是具有替代颜色的解决方案应该有效。 In your particular example, you have typo (1 equals sign), but it highlights only option itself (when options list is expanded) not selected value.您可能想使用 JS 实现的选择框。以 primeNg 或 ngx-bootstrap 为例。但最简单的选择是:

<option>{{cl.label + (cl.selectedStudent == true ? ' &#9745;' : '')}}</option>

https://www.w3schools.com/charsets/ref_utf_symbols.asp