Question

我有select个显示文字的选项：

<select *ngIf="cars" class="form-control">
  <option *ngFor="let car of cars" value="true">{{car.ID}}</option>
</select>

是否可以在选项的开头添加一个Icon？比如[icon] 3

更新

我已将库字体图标添加到.angular-cli.son：

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome-4.7.0/css/font-awesome.min.css"

并将我的select的代码更新为：

<select *ngIf="cars" class="form-control glyphicon">
  <option *ngFor="let car of cars" value="true">&#xf26e; {{car.ID}}</option>
</select>

我使用 bootstrap 3

它试图打印一个图标，但我得到一个空方块。有什么想法吗？

Answer 1

遗憾的是，使用纯HTML <select>是不可能的。选择包装是可能的。显示您自己的一段代码，而不是浏览器的默认select。我建议你找一些带有现成包装的库。例如，Angular Material（https://material.angular.io/components/select）中有选择包装器，但您可以找到独立的包装器。

Answer 2

在我看来，你正在使用Bootstrap。因此，可以将icon放在选项中，就像这样。

<select class="form-control glyphicon">
    <option value="">&#xe032; Icon 1</option>
    <option value="">&#xe033; Icon 2</option>
    <option value="">&#xe034; Icon 3</option>
</select>

在选择选项中添加图标 - Angular 2

2 个答案: