启用multiple的MatSelect未显示复选框,请求排查问题
问题描述
我使用Angular Material实现了一个多选下拉框,代码如下:
模板代码:
<mat-form-field class="search-form" floatLabel="always" appearance="fill"> <mat-select placeholder="Items" [compareWith]="compare" [(ngModel)]="params.itemId" multiple> <mat-option *ngFor="let item of items" [innerText]="item.name" [value]="item.id"> </mat-option> </mat-select> </mat-form-field>
组件类代码:
items: any[] = []; params: {};
目前组件能正常完成多选操作,也能按预期以数组格式获取选中值,但下拉选项里没有显示官方示例中的复选框,请问我遗漏了什么配置?
解决方案
问题出在缺少MatCheckboxModule的导入,多选mat-select的复选框样式依赖这个模块,按以下步骤处理:
- 在你的Angular模块文件(如
app.module.ts)中导入MatCheckboxModule:
import { MatCheckboxModule } from '@angular/material/checkbox';
- 将该模块添加到模块的
imports数组中,同时确保已导入其他相关的Material模块:
@NgModule({ imports: [ // 其他已存在的导入模块 MatFormFieldModule, MatSelectModule, MatCheckboxModule ] }) export class YourModuleName { }
完成上述配置后,多选下拉框的选项就会显示复选框了。
内容的提问来源于stack exchange,提问作者Hasan Can Saral
相关产品推荐
相关产品推荐

