Html 将符号动态附加到下拉选项

我的页面上有一个下拉列表，如果满足某些情况，我想在每个选项旁边动态添加一个复选标记。当我尝试以下方法时：

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

{{cl.label}

这不起作用。选项上没有附加任何内容。我甚至试过一个普通的角色：

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

{{cl.label}}X

无济于事。尽管该特定请求是客户的要求，但我尝试以下方法来提供替代解决方案：

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

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

{{cl.label}
.处于活动状态{
背景颜色：黄色；
}

它将突出显示黄色选项。这也没用。然后，我最终尝试使用一个下拉选项来突出显示内联样式：

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

{{cl.label}

---

这也没用。无论我做了什么，我都无法为下拉列表提供任何样式。是否有我遗漏的内容或您无法设置下拉选项的样式？我正在MacOS上使用Chrome。

您不能在

标记内使用innerHtml标记。但是，使用其他颜色的解决方案应该有效。在您的特定示例中，您有输入错误（1等号），但它只突出显示选项本身（当选项列表展开时）而不是选定值。您可能希望使用selectbox的JS实现。以Priming或ngx引导为例。但最简单的选择是：

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

{{cl.label+（cl.selectedStudent==true？&}

---

在您的选项中，我会使用

如下：

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

{{cl.label}

---

我还想问自己，使用trackBy是否真的有必要

如果您试图使用angular，我帮不了您，但对于jquery，它将类似于$（'option'）。on（'click'，function（）{//code here}）；虽然这在初始加载时有效（谢谢），但当为该类选择复选框（学生）时，它不会更新。如果模型更改，下拉选项是否会更新？此外，复选标记必须为绿色（另一个客户要求）。我尝试了一些预处理（我们已经将其集成到项目中了），虽然我可以得到很多我想要的东西，但我无法获得有条件地显示每个类的复选标记。我用伪选择器后面的：来显示它们，但它们需要基于selectedStudent变量来显示。请提供完整的代码，因为语句“当为该类选择复选框（学生）”对我来说不清楚。抱歉。抱歉，此下拉列表选择了一个班级（在学校）。选择班级后，学生列表将显示在下拉列表下方的网格中，每个学生姓名旁边都有一个复选框。ngFor与这个问题并不相关，但是如果您想查看代码，我可以提供。如果用户在类中选择了一个学生，则下拉列表中的类名称旁边会出现一个复选标记。好的，您的数据结构是：

[{label:“cl1”，学生：[{label:“st1-1”，selectedStudent:false”}，{label:“st1-2”，selectedStudent:false}，{label:“cl2”，学生：[{label:“st2-1”，selectedStudent:false}，{label:“st2-2，已选择学生：false}]}]

。迭代类，而不是迭代所选类中的学生。如果至少有一个学生被选为班级（

selectedStudent:true

）-需要突出显示父班级？我的数据结构看起来像：[{“name”：“Period 5 Advanced Algebra”，“id”：“ABCD4321”，“selectedStudent”：false，“studentCount”：19，“students”：[{“name”：“Bernard Sampson Sanders”，“id”：“10”}，{“name”：“Johnny Appleseed”，“id:“11”}，{“name:“Johnny Appleseed”，“id:“12”}]}]。当为该类选择学生时，将设置selectedStudent标志。如果该类中的所有学生都未被选中，则其将被还原。复选标记应绑定到该类的该标志。