Angular5中使用Angular Material实现复选框全选功能异常求助

安全阿岳

2026-5-20

解决Angular Material表格全选功能无法触发的问题

嘿，我一眼就瞅出问题所在了——你这全选按钮能取消但点不动，核心是masterToggle方法里的调用漏了关键参数！

你看这段代码：

this.conflicts.forEach(row => this.selection.select());

调用selection.select()的时候没把当前遍历的row传进去，Angular Material的SelectionModel根本不知道要选中哪一行，所以全选操作等于没执行；但取消全选的clear()方法不需要参数，所以能正常工作。

修正方案

把masterToggle方法改成这样就行：

masterToggle() {
  this.isAllSelected() ?
    this.selection.clear() :
    this.conflicts.forEach(row => this.selection.select(row)); // 这里必须传入row对象
}

另外，你提到需要获取选中项的Conflict_ID，可以通过监听selection的变化来实现，比如在组件的ngOnInit里加这段代码：

import { SelectionModel } from '@angular/cdk/collections';

// 先确保正确初始化SelectionModel（这步很重要，别漏了）
selection = new SelectionModel<any>(true, []); // 第一个参数true启用多选模式

ngOnInit() {
  this.selection.changed.subscribe(() => {
    const selectedConflictIds = this.selection.selected.map(item => item.Conflict_ID);
    console.log('当前选中的Conflict_ID列表:', selectedConflictIds);
  });
}