Angular Material选择列表：在模板中设置选中列

核心问题：手动设置[selected]与双向绑定冲突 #

你不需要手动设置[selected]属性，因为<mat-selection-list>通过[(ngModel)]绑定selectedColumns后，会自动根据数组中的值匹配<mat-list-option>的[value]，自动管理选中状态。手动设置[selected]反而会干扰双向绑定的逻辑，导致状态异常。

修正后的模板代码 #

<mat-selection-list #pickedCols [(ngModel)]="selectedColumns" (ngModelChange)="onPickColumns($event)">
  <mat-list-option *ngFor="let colVal of availableColumns" 
    [value]="colVal">{{colVal}}</mat-list-option>
</mat-selection-list>

确保组件逻辑正确 #

1. 确认availableColumns已正确初始化（比如在ngOnInit中赋值，确保它包含所有可选的列值）
2. 检查getColsFromLocalStorage()返回的数组值是否和availableColumns中的值完全匹配（字符串大小写、空格等都要一致，否则匹配失败）
3. 组件类中确保selectedColumns是可访问的普通数组：

selectedColumns: string[] = [];
availableColumns: string[] = []; // 示例：可初始化为所有可选列，如 ['a','b','c','d']

ngOnInit() {
  const cols = getColsFromLocalStorage(); // 假设返回 ['a','b','c']
  this.availableColumns = ['a','b','c','d']; // 设置所有可选列集合
  this.selectedColumns = cols; // 双向绑定会自动匹配并选中对应选项
}

onPickColumns(elements: string[]){
  updateColsInLocalStorage(elements);
}

额外排查点 #

• 如果availableColumns是异步获取的（比如HTTP请求），要确保在数据返回后再赋值selectedColumns，否则可能因为数据未加载导致匹配失败
• 若使用Angular响应式表单，也可以改用formControlName替代ngModel，逻辑一致：绑定的数组值会自动匹配选项的value来设置选中状态

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