如何识别ngModelChange事件的触发源（用户交互/代码触发）

核心问题原因 #

当你修改*ngFor迭代的users数组时，Angular会销毁不在过滤结果中的mat-list-option组件。此时mat-selection-list会认为这些被销毁的选项不再存在，自动清空选中状态并触发ngModelChange，导致你之前保存的selectedUsers被覆盖。

下面提供两种直接有效的解决方案：

方法1：改用selectionChange追踪用户交互 #

放弃依赖ngModelChange（它会响应组件内部的所有状态变化，包括DOM元素的销毁重建），转而监听每个mat-list-option的selectionChange事件——这个事件仅在用户手动勾选/取消时触发，完全不会被过滤操作影响。

修改模板：

<mat-selection-list
     name="userSelection"
     [ngModel]="selectedUsers">
         <mat-list-option *ngFor="let user of users"
                 [value]="user"
                 checkboxPosition="before"
                 [title]="user.name"
                 (selectionChange)="onUserSelectionChange($event)">
                     {{ user.name }}
         </mat-list-option>
</mat-selection-list>

对应TypeScript代码：

onUserSelectionChange(event: MatSelectionListChange) {
  const targetUser = event.option.value;
  if (event.option.selected) {
    // 添加选中项，避免重复
    if (!this.selectedUsers.some(u => u.id === targetUser.id)) {
      this.selectedUsers = [...this.selectedUsers, targetUser];
    }
  } else {
    // 移除取消选中的项
    this.selectedUsers = this.selectedUsers.filter(u => u.id !== targetUser.id);
  }
}

applyUserSearchFilter(username: string) {
    if (!isNullOrWhitespace(username)) {
        this.users = this.usersOriginal.filter(
            u => u.name.toLowerCase().indexOf(username.toLowerCase()) > -1
        );
    } else {
        this.users = this.usersOriginal;
    }
}

方法2：标记过滤状态，跳过非用户触发的ngModelChange #

如果一定要保留ngModelChange，可以手动设置一个过滤状态标志，在回调中跳过过滤阶段的更新：

TypeScript代码：

private isFiltering = false;

applyUserSearchFilter(username: string) {
    this.isFiltering = true;
    if (!isNullOrWhitespace(username)) {
        this.users = this.usersOriginal.filter(
            u => u.name.toLowerCase().indexOf(username.toLowerCase()) > -1
        );
    } else {
        this.users = this.usersOriginal;
    }
    // 用setTimeout确保组件完成DOM更新后再重置标志
    setTimeout(() => this.isFiltering = false);
}

onSelectedUsersChange(e: any) {
    // 仅处理用户交互触发的更新
    if (!this.isFiltering) {
        this.selectedUsers = e;
    }
}

补充优化：用trackBy减少DOM重建 #

在*ngFor中添加trackBy函数，让Angular复用已存在的列表项，减少不必要的DOM销毁重建，进一步降低状态丢失的概率：

模板修改：

<mat-list-option *ngFor="let user of users; trackBy: trackByUserId"
                 [value]="user"
                 checkboxPosition="before"
                 [title]="user.name">
                     {{ user.name }}
</mat-list-option>

TypeScript添加trackBy函数：

trackByUserId(index: number, user: any): number {
  // 用用户唯一标识（如id）作为追踪依据
  return user.id;
}

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