格式化<mat-select>角度材质中下拉列表的默认行为

时间:2018-02-14 15:26:33

标签: html css angular drop-down-menu angular-material

我正在使用角度材质选择功能来创建使用和的多选下拉菜单。内置代码打开选择框顶部的下拉框。我的实现要求用户在选择框时应该能够看到框中的值(框应该在显示框正下方打开)。我试图过度使用“变换原点”和“变换”属性 .mat-select-panel类但不知何故没有应用更改。可以帮助我如何调整此属性。

代码:'

<div>
 <mat-form-field panelClass="dropdown-border">
 <mat-select  [formControl]="selectValues" [multiple]="!multiSelectOptio disableRipple>
  <mat-option *ngFor="let option of comboBoxData.data " [value]="option">{{option}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

1 个答案:

答案 0 :(得分:1)

您可以使用变通方法来实现您的目标:在<mat-optgroup>内声明<mat-select>,并将选择框的标题作为标签传递。这样,一旦下拉框打开,它就会有一个标题标题,显示选择标题。

<div>
 <mat-form-field panelClass="dropdown-border">
   <mat-select  [formControl]="selectValues" [multiple]="!multiSelectOptio disableRipple>
     <mat-optgroup label="Something"></mat-optgroup>
     <mat-option *ngFor="let option of comboBoxData.data " [value]="option">{{option}}
     </mat-option>
   </mat-select>
 </mat-form-field>
</div>

工作示例here