Question

我的页面上有一个下拉菜单，如果遇到某些情况，我想在每个选项旁边动态添加复选标记。当我尝试以下内容时：

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

这不起作用。该选项没有附加任何内容。我甚至试过一个普通人物：

<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标记。但是替代颜色的解决方案应该有效。在您的特定示例中，您有拼写错误（1等号），但它仅突出显示选项本身（当展开选项列表时）而不是选定值。您可能希望使用selectbox的JS实现。查找primeNg或ngx-bootstrap作为示例。但最简单的选择是：

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

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

Answer 2

在您的选项中，我会使用<span *ngIf="cl.selectedStudent == true" class="fa fa-check"></span>，如：

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

我也问自己是否真的有必要使用trackBy

动态附加符号以下拉选项

2 个答案: