Angular16中MatSelectionList无法设置值的问题求助

错误根源是单选模式下的MatSelectionList仍然期望ngModel绑定的值是数组类型，哪怕你设置了[multiple]="false"。直接给selectedItem赋值单个字符串，组件内部会把这个值当成要遍历的集合，而字符串没有forEach方法，因此抛出错误。

方案1：将选中值改为数组类型（推荐，符合组件设计） #

修改TS代码，把单个选中项包裹在数组中：

mylist = ['elementA', 'elementB', 'elementC'];
selectedItem = ['elementB']; // 用数组存储单选结果

HTML代码无需修改，保持原有的双向绑定即可。

方案2：手动处理选中事件（适合需要单个值的场景） #

如果业务逻辑必须使用单个值而非数组，可以放弃双向绑定，改用selectionChange事件手动同步选中状态：

HTML代码 #

<mat-selection-list
    [multiple]="false"
    (selectionChange)="onSelectionChange($event)">
    <mat-list-option 
        *ngFor="let item of mylist" 
        [value]="item"
        [selected]="item === selectedItem">
        {{ item }}
    </mat-list-option>
</mat-selection-list>

TS代码 #

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

mylist = ['elementA', 'elementB', 'elementC'];
selectedItem = 'elementB';

onSelectionChange(event: MatSelectionListChange): void {
    this.selectedItem = event.options[0].value;
}

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