Angular Material mat-checkbox change事件无法获取checked值及列表异常问题

1. subscriber.checked始终为undefined的问题 #

你没给mat-checkbox绑定选中状态的数据源，也没从change事件里获取选中状态，自然拿不到subscriber.checked的值。有两种解决思路：

思路一：直接从change事件获取状态 #

修改模板，把事件参数$event传进方法，$event.checked就是当前复选框的选中状态：

<div *ngFor="let subscriber of selectedSubscribers">
    <mat-checkbox (change)="onSubscriberCheck(subscriber, $event.checked)">
        {{ subscriber.name }}
    </mat-checkbox>
</div>

对应的方法改成：

onSubscriberCheck(subscriber: Subscribers, isChecked: boolean) {
    if (isChecked) {
        // 选中时的操作
    } else {
        // 取消选中时的操作
    }
}

思路二：绑定ngModel并初始化checked属性 #

如果要通过subscriber.checked控制状态，必须先给每个subscriber对象初始化checked值，再绑定双向数据：

<div *ngFor="let subscriber of selectedSubscribers">
    <mat-checkbox [(ngModel)]="subscriber.checked" (change)="onSubscriberCheck(subscriber)">
        {{ subscriber.name }}
    </mat-checkbox>
</div>

在填充列表的方法里，确保checked有默认值（比如false）：

GetSelectedSubscribers() {
    this.selectedSubscribers = this.allSubscribers
      .filter(subscriber => subscriber.id !== undefined) 
      .map(subscriber => ({ 
          id: subscriber.id, 
          name: subscriber.name, 
          checked: subscriber.checked ?? false // 给checked加默认值
      }));
}

2. ngModel和change事件冲突的解决 #

双向绑定[(ngModel)]会自动更新subscriber.checked，同时触发change事件，导致你在方法里操作数组时，数据源频繁变化引发异常。推荐两种解决方案：

方案一：手动控制复选框状态，不依赖ngModel #

直接给已选/未选列表的复选框固定checked状态，通过change事件直接移动元素：

<!-- 已选中列表 -->
<div *ngFor="let subscriber of selectedSubscribers">
    <mat-checkbox [checked]="true" (change)="moveSubscriber(subscriber, 'unselected')">
        {{ subscriber.name }}
    </mat-checkbox>
</div>

<!-- 未选中列表 -->
<div *ngFor="let subscriber of unselectedSubscribers">
    <mat-checkbox [checked]="false" (change)="moveSubscriber(subscriber, 'selected')">
        {{ subscriber.name }}
    </mat-checkbox>
</div>

对应的方法：

moveSubscriber(subscriber: Subscribers, targetList: 'selected' | 'unselected') {
    // 先从原列表移除
    this.selectedSubscribers = this.selectedSubscribers.filter(s => s.id !== subscriber.id);
    this.unselectedSubscribers = this.unselectedSubscribers.filter(s => s.id !== subscriber.id);
    
    // 添加到目标列表
    if (targetList === 'selected') {
        this.selectedSubscribers.push(subscriber);
    } else {
        this.unselectedSubscribers.push(subscriber);
    }
}

方案二：用ngModelChange替代change事件 #

ngModelChange是在ngModel更新完成后触发的，能避免时序冲突：

<div *ngFor="let subscriber of selectedSubscribers">
    <mat-checkbox [(ngModel)]="subscriber.checked" (ngModelChange)="onSubscriberCheck(subscriber, $event)">
        {{ subscriber.name }}
    </mat-checkbox>
</div>

方法里先移除元素再重新添加，避免重复：

onSubscriberCheck(subscriber: Subscribers, isChecked: boolean) {
    // 先从两个列表都移除当前元素
    this.selectedSubscribers = this.selectedSubscribers.filter(s => s.id !== subscriber.id);
    this.unselectedSubscribers = this.unselectedSubscribers.filter(s => s.id !== subscriber.id);
    
    // 根据状态添加到对应列表
    if (isChecked) {
        this.selectedSubscribers.push(subscriber);
    } else {
        this.unselectedSubscribers.push(subscriber);
    }
}

3. 最后一个复选框名称为空的原因 #

大概率是这几个问题：

• unselectedSubscriberGroupItems.lists的最后一个元素本身name属性为空/undefined
• subtractListIds方法返回的列表里混入了无效数据（比如name为空的元素）
• map的时候没有给name加默认值，导致空值直接显示

解决办法：

1. 打印this.unselectedSubscriberGroupItems.lists，检查最后一个元素的name值
2. 在map时给name加默认值：

GetUnselectedSubscribers(){
    this.unselectedSubscriberGroupItems = this.subtractListIds(this.allSubscriberGroupItems, this.selectedSubscriberGroupItems);
    this.unselectedSubscribers = this.unselectedSubscriberGroupItems.lists.map(subscriber => ({ 
        id: subscriber.id, 
        name: subscriber.name || '未知订阅者', // 空值时显示默认文本
        checked: subscriber.checked ?? false 
    }));
}

3. 检查subtractListIds方法，确保返回的列表没有包含name为空的无效元素

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