在mat-选择/mat选项中添加mat分隔符

Question

是否可能有一个垫子分隔器(一条横线分隔两个垫子选项)？

我试过：

<mat-form-field>
  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <mat-divider></mat-divider>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
   </select>
</mat-form-field>

我现在有一个糟糕的解决办法是：

<mat-option>--------------------------</mat-option>

然而，这并不理想。

Answer 1

我不知道您到底希望如何显示分隔符，但是一种纯粹的CSS方法是覆盖主.mat-option上的styles.css类，使用:after 伪元素，并向border-bottom CSS属性添加一个值。

.mat-option:after {
  content: '';
  width: 100%;
  border-bottom: solid 2px black;
  position: absolute;
  left: 0;
  z-index: 1;
  top: calc(3em - 2px);
}

我已经在这里上创建了一个演示。

Answer 2

您可以使用mat-divider本身通过添加ng-container来包装mat-option和mat-divider来实现这一点。然后使用last ngFor 局部变量从最后一个mat-option中有条件地删除mat-divider。

<mat-select>
    <ng-container *ngFor="let food of foods; let last = last">
        <mat-option [value]="food.value">
            {{food.viewValue}}
        </mat-option>
        <mat-divider *ngIf="!last"></mat-divider>
    </ng-container>
</mat-select>

下面是StackBlitz上的一个工作示例。

Answer 3

是的，可以在mat-select/mat-选项中添加mat-divider。

<mat-form-field>
  <mat-label> Cars </mat-label>
  <mat-select>
    <mat-option value="volvo"> Volvo </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="saab"> Saab </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="mercedes"> Mercedes </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="audi"> Audi </mat-option>
  </mat-select>

​

希望它对你有帮助