Angular类组件中MatSelectionList的selectionChange事件未触发求助

首先可以明确的是：Angular 6.0.1搭配对应版本的Angular Material（6.x）本身是支持selectionChange事件的，这个问题大概率是你的实现细节有误，我帮你梳理几个常见的排查点和正确的实现方式：

1. 确认事件绑定的正确位置 #

selectionChange事件有两个层级的用法，绑定位置不对就会导致事件不触发：

• 如果要监听整个列表的选中集合变化，需要把事件绑定在<mat-selection-list>元素上：

  <mat-selection-list (selectionChange)="handleListSelection($event)">
    <mat-list-option *ngFor="let item of items" [value]="item">
      {{ item.name }}
    </mat-list-option>
  </mat-selection-list>
  

  对应的组件类处理函数要接收MatSelectionListChange类型的参数：

  import { MatSelectionListChange } from '@angular/material/list';
  
  handleListSelection(event: MatSelectionListChange) {
    console.log('当前选中的所有选项:', event.options);
  }
  

• 如果要监听单个选项的选中状态切换，则需要把事件绑定在<mat-list-option>元素上，此时事件参数是MatListOptionChange类型：

  <mat-selection-list>
    <mat-list-option 
      *ngFor="let item of items" 
      [value]="item"
      (selectionChange)="handleOptionSelection($event)"
    >
      {{ item.name }}
    </mat-list-option>
  </mat-selection-list>
  

  对应的处理函数：

  import { MatListOptionChange } from '@angular/material/list';
  
  handleOptionSelection(event: MatListOptionChange) {
    console.log('当前选项的选中状态:', event.source.selected);
    console.log('当前选项的值:', event.source.value);
  }
  

2. 确认模块已正确导入 #

确保你的功能模块（比如AppModule）中已经导入了MatListModule，因为MatSelectionList和MatListOption都属于这个模块：

import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    // ...其他模块
    MatListModule
  ]
})
export class AppModule { }

3. 排除其他干扰因素 #

• 检查选项是否设置了disabled属性：如果mat-list-option的disabled为true，用户无法切换选中状态，自然不会触发selectionChange事件。
• 检查是否有自定义指令或全局事件监听阻止了事件冒泡，导致事件无法传递到组件层面。

关于版本的说明 #

Angular 6.0.1对应的Angular Material 6.x版本中，MatSelectionList的selectionChange事件是稳定可用的，不存在已知的官方bug导致事件无法触发，所以优先排查上述实现细节问题。

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