如何在单选模式的Angular Material selection-list中取消选中list-option？

云上老周

2026-9-30

实现方案

这个需求可以直接基于现有Angular Material组件实现，无需更换技术栈或从零开发，实现逻辑如下：

步骤1：修改模板代码

给mat-selection-list添加模板引用，同时为每个mat-list-option绑定点击事件：

<mat-selection-list [multiple]="false" #selectionList>
  <mat-list-option [value]="1" (click)="handleOptionClick(selectionList, $event)">Option 1</mat-list-option>
  <mat-list-option [value]="2" (click)="handleOptionClick(selectionList, $event)">Option 2</mat-list-option>
  <mat-list-option [value]="3" (click)="handleOptionClick(selectionList, $event)">Option 3</mat-list-option>
</mat-selection-list>

如果你的选项是动态生成的，直接用*ngFor循环渲染即可，逻辑通用。

步骤2：编写组件逻辑

在对应的ts文件中添加点击事件处理逻辑：

import { Component } from '@angular/core';
import { MatSelectionList, MatListOption } from '@angular/material/list';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  handleOptionClick(list: MatSelectionList, event: MouseEvent) {
    // 获取当前点击的选项元素
    const targetEl = event.target as HTMLElement;
    const clickedOption = targetEl.closest('mat-list-option') as MatListOption | null;
    if (!clickedOption) return;
    
    // 如果点击的是已经选中的选项，直接取消选中
    if (clickedOption.selected) {
      clickedOption.selected = false;
      list.selectedOptions.clear();
    }
  }
}