时间戳

首页 > 解决方案 > Angular 5：选择列表选项文本的不同前景色

html - Angular 5：选择列表选项文本的不同前景色

问题描述

我想用不同的颜色为选择列表选项的前景着色：以下是我的下拉列表的代码：

<select id="tier" class="form-control" [(ngModel)]="tierId">
    <option *ngFor="let m of tierList" value="{{m.tier}}" >
        {{m.optiontext}} | {{m.count}} 
    </option>
</select>

我想以蓝色显示选项文本并以红色计数。无论如何我可以做到这一点吗？

标签： htmlcssangularangular5

解决方案

本机<select>不支持选项中的多种颜色。

您可以尝试其他库，例如 @angular/material。

例如：

<mat-select id="tier" [(value)]="tierId">
  <mat-option *ngFor="let m of tierList" [value]="m.tier">
    <span style="color: blue;">{{m.optiontext}}</span> |
    <span style="color: red;">{{m.count}}</span>
  </mat-option>
</mat-select>

有关更多信息，请参阅https://v5.material.angular.io/components/select/examples

推荐阅读