刻度线未出现在角度选项下拉列表中

Question

我正在尝试在我的 Angular 应用程序的选项下拉列表中的默认项目之前应用一个刻度线。如本例所示，它的名字是 steven。我如何做到这一点

由于某种原因，它似乎不适用

我创建了一个堆栈闪电战来重现该问题 https://stackblitz.com/edit/angular-ivy-qac8ae?file=src/app/app.component.html

标记

<form [formGroup]="form">
  <div class="wrapper">
    <div class="select-wrapper-row">
      <select formControlName="name">
        <option value="">-- Select an option --</option>
        <option
          *ngFor="let item of nameList$ | async"
          [ngClass]="{ checkmark: item.isAlive == true }"
          [selected]="item.isAlive"
        >
          {{ item.name }}
        </option>
      </select>
    </div>
  </div>
</form>

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: white;
  height: 1em;
  margin-right: 0.6em;
  text-align: center;
  position: absolute;
  right: 0;
}

Answer 1

::before 和 ::after 是伪元素，实际上将子节点附加到元素，因此它们不适用于任何不能包含子节点的元素 - 即option.

您也可以使用内置此功能的组件，例如 ng-select。

Answer 2

我无法让你的 stackblitz 运行。

~/src/main.ts 中的错误
ngcc 无法在 @angular/material@12.0.6 上运行。

但是可以使用简单的 html sn-p 来演示解决方案：

body {
  width: 50vw;
}

div {
  border-bottom: 1px dotted green;
}

.checkmark {
  /* without this checkmark will not be 
      placed relative to the item */
  position: relative;
}

.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;
  /* unless your background is dark don't use white as text color */
  color: white;
  height: 1em;
  margin-right: 0.6em;
  text-align: center;
  /* if you want it on left side then remove this*/
  position: absolute;
  right: 0;
}

.change1::before {
  color: green;
}

.change2::before {
  position: static;
}

.checkmarkFixed: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.6em;
  text-align: center;
}

select {
  width: 100px;
}

option:checked {
  background-color: gray;
}

<div class='checkmark'>Your code: not working</div>
<div class='checkmark change1'>Correction 1</div>
<div class='checkmark change1 change2'>Correction 2</div>
<div class='checkmarkFixed'>Fixed</div>

<select size=5>
  <option value="1" class='checkmark change1'>One</option>
  <option value="3" class='checkmark change1 change2'>Two</option>
  <option value="2" class="checkmarkFixed">Three</option>
  <option value="4" selected>Four</option>
  <option value="5">Five</option>
</select>

• 您选择白色作为厚标记的颜色。除非背景很暗，否则它不会被看到。
• 如果您希望它位于项目的左侧，请不要使用position:absolute。
• 如果您使用position:absolute，则添加.checkmark 规则，如上所示。

我特意创建了单独的 .change1 和 .change2 类来向您展示可以更改哪些内容来解决问题。您可以在一条规则中进行这些更改，例如 .checkmarkFixed:before

Answer 3

我已经重构了一些东西。这里是stackblitz示例

https://stackblitz.com/edit/angular-ivy-bbnkfufile=src/app/app.component.html

<form [formGroup]="form">
  <mat-select placeholder="select" formControlName="title">
    <mat-option *ngFor="let item of nameList$ | async" [value]="item">
      <div class="option-wrapper">
        <span>
          {{ item.name }}
        </span>
        <span *ngIf="item.isAlive" class="checkmark"></span>
      </div>
    </mat-option>
  </mat-select>
</form>

CSS

p {
  font-family: Lato;
}


.option-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkmark:before {
  content: 'L';
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  display: inline-block;
  width: 1 em;
  color: black;
  height: 1 em;
}

.mat-option {
  width: calc(100vw - 50px);
}