我正在使用 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>
最佳答案
您可以使用一种解决方法来实现您想要的:声明一个 <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
关于html - 格式化 <mat-select> Angular Material 中下拉的默认行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48790689/