Angular中如何根据全局变量预选中表格内的单选按钮？

问题出在你同时使用了[(ngModel)]和checked属性——Angular中ngModel会完全接管表单控件的状态，手动设置的checked会被覆盖，所以两种写法都无效。

正确处理方式 #

1. 初始化同步选中状态：在组件初始化时（比如ngOnInit钩子），把双向绑定的selectedItem变量赋值为global_selectedItem，ngModel会自动匹配对应value的单选按钮并选中它。
2. 移除冗余的checked属性：不需要手动设置checked，让ngModel管理选中状态即可。
3. 优化事件绑定（可选）：如果selectItem函数仅用于更新global_selectedItem，可以直接通过ngModelChange同步，避免重复操作。

修改后的模板代码 #

<tr ngFor="let i of items">
    <td>
        <input 
            id="selectedItem_{{i.item_id}}" 
            type="radio" 
            name="selecteditem" 
            [(ngModel)]="selectedItem" 
            [value]="i.item_id"
            (ngModelChange)="global_selectedItem = $event"
        >
    </td>
    <td>{{i.name}}</td>
    <td>{{i.qty}}</td>
    <td>{{i.desc}}</td>
</tr>

组件初始化代码示例 #

ngOnInit() {
    // 页面加载时同步选中状态
    this.selectedItem = this.global_selectedItem;
}

无效原因说明 #

Angular表单控件绑定逻辑中，ngModel优先级高于原生checked属性。同时设置两者时，ngModel会根据绑定的selectedItem值决定选中状态，手动设置的checked会被直接忽略，所以两种写法都不生效。

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