时间戳

首页 > 解决方案 > 我需要在下拉列表的选定选项上添加一个刻度线。我正在使用角材料。没有得到解决方案

angular - 我需要在下拉列表的选定选项上添加一个刻度线。我正在使用角材料。没有得到解决方案

问题描述

示例：选项，A B C D

如果我从下拉列表中选择 B，我需要在所选选项旁边添加一个勾号。

标签： angularangular-material

解决方案

创建一个css类以在选择选项后创建复选标记，例如

.checkmark:before {
  content:'L';
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  color: green;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  position: absolute;
  right: 0;
}

然后使用 ngclass 在所选选项上设置此类

<mat-option *ngFor="let item of data" [ngClass]="{'checkmark':item==selectedValue}" [value]="item">
        {{item}}
      </mat-option>

演示

推荐阅读