Angular Material mat-selection-list交互及多选控制异常求助

核心问题根源 #

你的代码存在结构错误：把*ngFor放在了<mat-selection-list>标签上，导致每个参与者对应一个独立的选择列表，而非在同一个列表内生成多个选项。这直接引发了两类问题：

• 多选控制失效：每个列表仅含一个选项，[multiple]="false"只对单个列表生效，因此能同时选中不同列表的选项，且单个列表的唯一选项无法取消选中。
• UI交互异常：多个独立选择列表的布局不符合Angular Material组件的设计预期，导致选中时出现区域放大、复选框偏移、文本短暂消失等渲染异常。

修正后的代码 #

将*ngFor移至<mat-list-option>标签，让所有选项归属同一个选择列表：

<div class="bodyDiv">
    <mat-selection-list [multiple]="false">
        <mat-list-option class="listItem" *ngFor="let p of participants">
            {{p}}
        </mat-list-option>
    </mat-selection-list>
</div>

额外优化建议 #

若修正后UI仍有异常，检查以下两点：

• 确认Angular Material主题样式已正确导入：在全局样式文件（如styles.scss）中添加@import '@angular/material/prebuilt-themes/indigo-pink.css';（可替换为其他官方主题）。
• 排查自定义.listItem样式中可能冲突的属性，比如手动设置的position、display、transform等，避免干扰组件默认布局。

内容的提问来源于stack exchange，提问作者Akaza