You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

启用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的复选框样式依赖这个模块,按以下步骤处理:

  1. 在你的Angular模块文件(如app.module.ts)中导入MatCheckboxModule:
import { MatCheckboxModule } from '@angular/material/checkbox';
  1. 将该模块添加到模块的imports数组中,同时确保已导入其他相关的Material模块:
@NgModule({
  imports: [
    // 其他已存在的导入模块
    MatFormFieldModule,
    MatSelectModule,
    MatCheckboxModule
  ]
})
export class YourModuleName { }

完成上述配置后,多选下拉框的选项就会显示复选框了。


内容的提问来源于stack exchange,提问作者Hasan Can Saral

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.10 20:52:45