如何在Angular中设置单选按钮的checked属性？

Question

在DOM的以下屏幕截图中，我有一个无线电输入。所选值由Angular [(ngModel)]属性确定。你可以在这里看到模型属性匹配此输入的value属性，所以我假设它是如何确定为checked。

但是虽然这个确切的HTML场景发生在我之前，而Angular似乎确实将其处理为已检查，但在最近的更改之后我无法辨别，现在checked属性实际上并未返回为true。一旦我开始选择值，一切都按预期工作，但它最初设置它似乎没有注册，即使它反映在HTML中。

checked财产究竟是如何由Angular确定的？将ngModel设置为不足够的值？

Answer 1

这是一个回避，但我最终通过以下手动方式实现无线电/模型连接，删除[(ngModel)]并使用checked和click绑定。

以前，selectedAction是分配给[(ngModel])的值，但现在actionIsSelected(action.id)正在使用控制器中预先初始化的selectedAction进行相等检查，并在点击事件中重新分配。

<input [id]="'action'+action.id" class="accessible" type="radio" required name="action" [value]="action.id" [checked]="actionIsSelected(action.id) ? 'true' : null" (click)="selectedAction = action.id">

Answer 2

在通过文档快速扫描后，我找到了RadioControlValueAccessor。看起来Angular内置了一种方式。

我也很幸运使用以下方法进行单选按钮和下拉菜单。虽然现在我很想尝试内置的RadioControlValueAccessor。

<input #radioButton type="radio" (change)="processChanges(#radioButton.value)">

这将获取更改值并将其发送到组件进行处理，您可以在其中更新表单值。